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Tilio 联 合 创始 人 ， 十 年 设计 经 验 的 UX 设 
计 师 ， 具 有 丰富 的 Web 交 互 设 计 经 验 。 对 
设计 体系 、 设 计 语言 和 团队 协作 有 浓厚 兴 
趣 ， 近 几 年 一 直 进行 相关 调研 ， 并 在 调研 
基础 上 著 成 本 书 。 
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有 多 年 的 Web 开 发 、 产 品 设 计 与 黑客 增长 
经 验 ， 致 力 于 “设计 体系 ”的 培训 、 资 询 与 
推广 工作 ( 微 信 公 众 号 designsystem ) 。 
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等 书 。 微 博 @weakow。 
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译 者 序 


互联 网 产品 与 妍 发 团队 里 有 一 些 第 见 的 迷 思 。 


(1) 产品 经 理 和 设计 师 需 要 懂 技 术 吗 ? 开发 人 员 需 要 懂 设 计 吗 ? 

(2) 应 当先 做 设计 再 出 规范 ， 还 是 先 出 规范 再 做 设计 ? 

(3) 如 采 老 板 的 意见 与 设计 师 目 己 的 想法 相左 ， 设 计 师 应 该 坚 
持 己见 吗 ? 


这 些 同 题 曾 经 困扰 我 们 ， 时 至 今日 它们 也 远 了 远 没 有 被 彻底 解 
决 。 不 过 ， 针 对 上 面 列 举 的 这 类 问题 ， 先 进 的 互联 网 团队 已 经 
逐渐 形 成 了 一 套 狐 的 方法 论 ， 并 通过 它 大 大 地 改进 了 互联 网 领 
域 的 设计 实践 。 这 套 方法 论 就 是 设计 体系 (design system ) 。 


设计 体系 的 概念 早已 有 之 ， 不 过 ， 这 一 概念 为 互联 网 公司 所 用 
是 在 最 近 几 年 。 经 过 短 短 几 年 的 发 展 ， 这 一 理念 已 被 国外 互联 
网 团队 广泛 接受 ， 相 关 的 方法 论 也 成 了 用 户 体验 设计 领域 的 最 
佳 实践 。 主 流 的 产品 设计 杂志 (如 Smashing) 有 了 稳定 的 设计 
体系 专栏 。 多 个 地 方 有 了 专门 以 设计 体系 为 主题 的 会 议 ， 如 美 
国 的 Clarity 设计 体系 会 议 目 2016 年 起 每 年 举办 一 届 。 新 兴 的 
设计 软件 ， 如 Figma、InVision、UXPin， 引 入 了 专门 用 来 管理 
设计 体系 的 功能 模块 ， 并 将 其 作为 重要 腕 点 进行 宣传 。 设 计 师 
的 招聘 开始 要 求 泡 握 设 计 体 系 相关 技能 ， 有 的 公司 其 至 设立 了 
专门 负责 维护 设计 体系 的 加 位 。 


尽管 设计 体系 的 概念 在 国外 已 广 为 使 用 ， 在 国内 却 鲜 有 讨论 。 
你 手 里 的 这 本 书 ， 是 国内 出 版 的 第 一 本 以 设计 体系 为 主题 的 图 
书 。 作 为 译 者 ， 我 也 希望 通过 这 本 书 将 设计 体系 这 一 概念 市 到 
国内 的 互联 网 圈 ， 让 更 多 的 产品 经 理 、 设 计 师 和 前 问 开 发 人 员 
了 解 它 ， 并 在 实际 工作 中 使 用 它 。 


V1 


那么 ， 什 么 是 设计 体系 呢 ? 当 我 跟 其 他 人 解释 设计 体系 的 概念 
的 上 时候， 经 第 从 设计 实践 的 三 个 层级 开始 讲 起 。 


第 1 层级 : 组 件 库 。 即 便 最 初级 设计 师 也 懂得 统一 样式 的 重要 
性 。 如 来 你 将 网 站 的 主要 按钮 定义 为 监 色 、 小 圆 角 的 样式 ， 你 
大 概 不 会 在 下 一 个 用 到 主要 按钮 的 界面 将 其 设 为 绿色 ， 或 改 为 
大 圆 角 。 如 末 产 品 界面 中 出 现 不 统一 的 情况 ， 很 容易 让 用 户 怀 
疑 这 家 公司 的 设计 团队 不 够 专业 。 为 了 统一 样式 ， 设 计 师 很 容 
易 想 到 做 一 个 组 件 库 ， 陈 列 所 有 界面 中 被 复 用 的 组 件 ， 如 按 
钮 、 文 本 框 、 标 爸 页 等 。 组 件 库 不 仅 可 以 指导 设计 师 的 工作 ， 
还 可 以 为 前 问 开 发 人 员 提 供 参 考 。 


第 2 层级 : 设计 语言 。 组 件 库 提供 了 对 同一 类 元 素 的 约束 ， 却 
没有 指出 不 同类 元 素 之 间 的 联系 。 这 时 ， 我 们 需要 引入 设计 语 
言 的 概念 。 一 个 产品 的 设计 语言 古 塑造 该 产品 独特 且 统 一 的 
风格 的 一 套 法 则 。 一 辆 奔驰 车 即便 摘 去 标志 也 人 很 容易 让 人 认 
出 它 是 奔驰 ， 这 是 因为 所 有 的 奔驰 车 都 遵从 相同 的 设计 语言 。 
Google 旗下 众多 产品 线 共 享 同 一 套 设计 语言 ， 其 中 任何 一 个 界 
面 都 不 会 让 人 感觉 出 目 Apple 或 Microsoft 之 手 。 好 的 产品 都 
打造 了 属于 目 己 的 设计 语言 。 是 设计 语言 统一 了 整个 产品 的 风 
格 ， 并 让 产品 有 了 区 别 于 其 他 产品 的 个 性 。 


第 3 层级 : 设计 体系 。 组 件 库 和 设计 语言 定义 了 产品 该 是 怎 
样 ， 却 没有 解答 为 什么 古 这 样 以 及 如 何 做 到 这 样 。 为 了 回答 这 
些 问 题 ， 有 人 引入 了 设计 体系 的 概念 ， 用 以 指 代 产 品 团队 内 部 
形成 的 用 于 指导 其 设计 工作 的 一 系列 共享 的 最 佳 实践 。 们 单 地 
说 ， 设 计 体系 是 以 下 这 些 内 容 的 集合 : 设计 目的 、 设 计 原 则 、 
组 件 库 、 样 式 指南 ， 以 及 用 于 提高 设计 师 和 开发 人 员 沟 通 效 率 
的 工作 流程 和 实用 工具 。 建 立 有 效 的 设计 体系 可 以 提高 设计 决 
菏 、 设 计 与 开发 沟通 等 工作 的 效率 ， 并 减 小 出 错 的 可 能 性 。 此 
外 ， 建 并 设计 体系 也 是 团队 知识 管理 的 一 部 分 ， 有 助 于 为 新 加 
入 团队 的 成 员 提 供 指 导 ， 同 时 确保 团队 的 工作 不 会 因为 菜 位 关 


键 成 员 的 离开 而 花 受 损失 。 


如 采 你 对 设计 体系 概念 的 理解 还 停留 在 抽象 的 层面 ， 不 妨 现 在 
就 去 看 看 下 面 列 举 的 这 些 具 体 和 案例， 从 而 对 设计 体系 形成 一 个 
直观 的 认识 。 


一 、 平 台 级 设计 体系 。Apple、Google、Microsoft 三 家 公司 各 
自 都 有 流行 的 操作 系统 (Apple 有 i0S、macOS 等 ，Google 有 
Android，Microsoft 有 Windows)。 为 了 指导 各 自生 态 下 应 用 软 
件 的 设计 ， 它 们 都 推出 了 完整 的 设计 体系 。 


(1) Apple 的 Human Interface Guidelines: https://developer.apple.cony 
deslgn/human-interface-guldelines/ 

(2) Google 的 Material Design: https://material.io/ 

(3) Microsoft 的 Fluent Design System : https:/www.microsoft.com/ 
design/fluent/ 


二 、 公 司 级 设计 体系 。 有 的 公司 为 目 身 产品 或 同类 产品 打造 了 
设计 体系 ， 并 将 它们 发 布 到 网 上 。 以 下 征 有 名 的 儿 个 案例 。 


(1) Atlassian 的 设计 体系 : https://atlassian.design/ 
(2) IBM 的 Carbon 设计 体系 : https:/www.carbondesignsystem.com/ 
(3) 蚂蚁 金 服 的 Ant Design: https://ant.design/ 


设计 体系 在 国内 还 没有 取得 广泛 的 认 知 ， 而 本 书 正 古国 内 介绍 
设计 体系 的 第 一 本 图 书 。 为 了 在 国内 推广 设计 体系 的 理念 ， 
建立 了 一 个 以 设计 体系 为 题 的 微 信 公众 号 ， 欢 迎 读者 朋友 们 
关注 〈 微 信号 : designsystem)。 些 外， 如 果 你 想 跟 我 交流 ， 可 
以 给 我 发 邮件 (wang@weakow.com)， 也 可 以 通过 微 博 找 到 我 
(@weakow )。 
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如 果 你 有 时 间 ， 不 妨 看 看 亏 术 家 Emily Garfield 的 作品 。 她 用 水 
彩 画 创作 精美 且 钳 综 复 杂 的 地 图 一 一 每 一 幅 画 的 都 是 一 个 不 存 
在 的 地 方 ， 每 一 幅 都 令 人 惊叹 。 她 从 不 括 绘 城市 真实 的 景观 ， 
而 古 创 造 一 个 复杂 的 模式 一 一 打 结 的 道路 、 曲 折 的 河流 ， 抑 或 
紧 竣 的 城市 街区 一 一 并 重复 它 。 她 不 停 地 重复 这 种 模式 ， 每 次 
只 稍微 改变 一 点 ， 问 外 盘旋 直到 作品 完成 为 止 。 因 此 ， 她 的 亏 
术 作品 具有 生成 性 ， 如 同 分 形 ”一般 : 由 重复 的 图 案 构 成 ， 但 
感觉 又 像 是 一 个 凝聚 在 一 起 的 整体 。 


实际 上 ，Garfield 曾经 说 过 :“ 我 的 创作 过 程 ， 可 以 称 为 不 断 生 
长 的 绘画 。 当 阅 读 手 里 这 本 很 棒 的 书 的 时 候 ， 我 经 第 想起 这 
句 话 。 说 不 定 你 也 会 这 样 。 


近年 来 ，Web 设计 师 开 始 拥 抱 更 加 模块 化 、 模 式 驱 动 的 设计 实 
践 。 这 样 做 是 有 充分 理由 的 : 我 们 需要 为 更 多 的 屏 医 类 型 、 更 
多 的 设备 类 型 、 更 多 的 场景 和 更 多 的 用 户 创 造 非 几 的 体验 。 为 
此 ， 我 们 开始 将 界面 拆 解 为 微小 的 、 可 复 用 的 模块 ， 并 借助 这 
些 模式 ， 以 比 过 去 快 得 多 的 速度 构建 产品 、 功 能 和 界面 。 


不 过 ， 仅 有 设计 模式 是 不 够 的 。 我 们 需要 将 它们 纳入 一 个 更 大 
的 体系 之 中 ， 从 而 让 这 些小 的 界面 模块 显得 统一 、 连 贯 、 相 互 
关联 。 它 们 是 整体 的 一 部 分 。 也 就 是 说 ， 我 们 需要 的 是 一 个 设 
计 体 系 。 这 便 是 本 书 产 生 的 原因 。 


在 这 本 书 中 ， 作 者 阿拉 回 我 们 展示 了 如 何 构建 设计 体系 以 支撑 
数字 产品 的 设计 。 通 过 清晰 的 前 述 、 和 案例 研究 和 详尽 的 例子 ， 


QD 一 个 几何 形状 , 可 以 分 成 数 个 部 分 , 且 每 个 部 分 都 是 整体 缩小 后 的 形状 ， 
即 为 分 形 。 译 者 注 


滞 


阿拉 向 我 们 展示 了 如 何在 团队 里 建立 一 僚 通 用 、 共 享 的 语言 ， 
从 而 让 团队 成 员 得 以 有 效 地 开展 合作 。 她 会 讲述 不 同 的 组 织 如 
何 构建 设计 体系 并 将 其 付 诸 实践 的 故事 ， 还 会 讨论 随 着 时 间 的 
推移 改进 这 些 设计 体系 的 各 种 方法 模型 。 


可 以 说 ， 这 不 仅仅 十 一 本 书 ， 它 还 是 一 幅 地 图 ， 清 晰 地 勾勒 出 
了 更 加 可 持续 的 数字 闫 品 设计 模型 。 如 霖 我 们 顺 着 阿拉 手绘 的 
路 径 前 行 ， 就 能 学 会 如 何 构建 出 更 好 的 设计 体系 ， 当 然 ， 也 融 
能 学 会 如 何 运 用 这 套 体系 做 出 更 好 的 设计 。 


Ethan Marcotte 


天 于 本 书 


随 着 网 络 不 断 地 快速 变化 ， 并 且 变 得 越 来 越 复杂 ， 静 态 页 面 的 
思维 模式 已 经 越 来 越 站 不 住 半 了， 很 多 人 都 开始 以 更 为 系统 的 
方式 开展 设计 工作 。 


然而 并 非 所 有 设计 体系 都 同样 有 效 。 有 些 会 形成 统一 的 用 户 体 
验 ， 有 些 则 会 产生 混乱 的 拼 竣 式 设计 。 有 些 会 沿 发 团队 的 灵 
， 有 些 则 会 被 团队 名 视 。 有 些 会 随 着 时 间 的 推移 变 得 越 来 越 
好 ， 变 得 更 为 凝聚 ， 可 以 更 好 地 运转 ， 有 些 则 会 变 得 越 来 越 
糟 ， 变 得 脆 肿 和 守重 。 


刘 


民 好 且 持 入 运转 的 设计 体系 的 关键 特质 是 什么 呢 ? 我 对 这 个 问 
题 非 党 感 兴趣 ， 因 此 伦 了 很 多 时 间 研 究 和 思考 它 。 这 些 研 究 和 
思考 便 构成 了 本 书 的 基础 。 

通过 研究 大 大 小 小 的 公司 建立 设计 体系 的 经 验 ， 我 逐 痢 明确 了 
构建 一 套 行 乙 有 效 、 足 以 激发 团队 打造 优秀 数字 产品 的 设计 体 
系 的 关键 因 系 。 


本 书 读者 
本 书 主要 针对 的 是 那些 尝试 将 设计 体系 的 思想 融入 其 组 织 文化 
的 中 小 型 产品 团队 。 产 品 团队 里 的 每 个 人 都 可 以 在 阅读 本 书 的 


过 程 中 受益 ， 尤 其 是 视觉 设计 师 、 交 互 设计 师 、 用 户 体验 设计 
师 和 前 端 开发 人 员 。 


本 书 基于 我 作为 交互 和 视觉 设计 师 的 经 验 ， 曾 述 了 我 对 设计 体 


天 于 本 二 


系 的 看 法 。 本 书 不 涉及 其 他 关联 领域 ， 如 信息 架构 、 内 容 沉 
略 、 设 计 研 究 等 。 同 时 ， 这 也 不 是 一 本 技术 书 。 你 找 不 到 任何 
代码 示例 ， 也 找 不 到 任何 关于 开发 工具 和 技术 的 深入 分 析 ， 尽 
管 书 里 有 着 大 量 与 前 端 工作 直接 相关 的 讨论 。 


这 是 一 本 设计 书 ,但 不 十 一 本 展示 设计 作品 的 书 ， 也 不 古 一 本 
关于 数字 产品 设计 的 综合 指南 ”。 本 书 介绍 的 是 如 何以 更 为 系统 
的 方式 处 理 设计 过 程 ， 确 保 设 计 体系 对 实现 产品 的 目的 有 所 帮 
助 ， 并 符合 团队 文化 。 


第 一 部 分 讨论 的 是 设计 体系 的 基础 一 一 模式 与 实践 。 设 计 模 式 

是 界面 中 的 可 复 现 、 可 复 用 的 元 素 ， 既 包括 具体 的 、 功 能 性 的 

元 素 (如 按钮 和 文本 框 )， 也 包括 更 具 描 述 性 的 元 素 (如 图 标 

样式 、 颜 色 和 版 式 )。 模 式 是 相互 关联 的 ， 它 们 共同 构成 了 产 

品 界 面 的 设计 语言 。 

实践 则 是 创建 、 捕 歼 、 共 享 和 使 用 这 些 模式 的 方法 ， 比 如 遵循 

一 系列 原则 ， 或 者 构建 一 个 模式 库 。 

第 二 部 分 : 过 程 

设计 体系 无 法 在 一 夜 之 间 建 成 ， 它 是 随 着 产品 的 发 展 逐 壮 建 立 

Q) 如 果 你 想 阅 读 这 方面 的 书 ， 我 推荐 Alan Cooper 的 《About Face: 交互 
设计 精髓 》、Jeff Gothelf 和 Josh Seiden 的 《精益 设计 : 设计 团队 如 何 改 


善 用 户 体 验 》， 以 及 Kim Goodwin 的 Designing for the Digital Age: How 


to Create Human-Centered Products and Services。 
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天 于 本 书 


起 来 的 。 不 过 ， 这 人 循 一 些 原 则 和 方法 ， 便 能 确 你 设计 体系 表 痢 
正确 的 方向 发 展 ， 并 让 我 们 拥有 某 种 程度 的 控制 权 。 本 书 的 第 
二 部 分 侧重 于 前 释 建立 和 维护 设计 体系 的 实际 步 又 和 实用 技 
术 : 规划 任务 ， 编 写 界 面 清 单 ， 建 立 模 式 库 ， 以 及 创建 、 记 
录 、 发 展 和 维护 设计 模式 等。 


术语 


在 深入 探讨 设计 体系 这 一 主题 之 前 ， 让 我 们 先 看 看 贯穿 全 书 的 
一 些 术语 。 

模式 或 设计 模式 

我 使 用 模式 这 个 词 来 指 代 界面 中 任何 可 复 现 、 可 复 用 的 元 素 ， 
如 按钮 、 文 本 框 、 图 标 样式 、 颜 色 、 版 式 、 重 复 的 使 用 流程 和 
交互 行为 等 。 这 些 元 素 可 以 用 来 解决 特定 的 设计 问题 ， 满 足 用 
户 需求 ， 或 者 唤起 情感 。 本 书 使 用 功能 性 模式 指 代 与 行为 相关 
的 模式 ， 使 用 感知 性 模式 指 代 与 品牌 和 美学 相关 的 模式 。 


功能 性 模式 或 模块 

这 两 个 术语 在 本 书 中 可 互 换 使 用 。 它 们 指 代 界面 中 有 形 的 构 
件 ， 如 按钮 、 标 题 、 表 单元 素 、 菜 单 等 。 
感知 性 模式 或 样式 


这 两 个 术语 指 的 是 更 具 摘 述 性 的 、 无 形 的 设计 模式 ， 如 图 标 样 
式 、 颜 色 、 版 式 等 。 它 们 通常 用 于 创造 某 种 美感 ， 加 强 用 户 与 
产品 的 情感 联系 。 


模式 语言 或 设计 车 言 
产品 界面 的 设计 语言 是 由 一 组 相互 关联 、 可 共享 的 设计 模式 构 
成 的 。 模 式 语言 组 合 了 功能 性 模式 和 感知 性 模式 ， 以 及 平台 特 


定 的 模式 《如 汉堡 菜单 )、 领 域 模式 《如 分 别针 对 电 商 网 站 、 
财务 软件 、 社 交 应 用 的 模块 )、 说 服 式 用 户 体验 模式 ， 等 等 。 


术语 


设计 体系 或 体系 


Web 领域 的 社区 中 没有 对 “设计 体系 ”这 个 词 的 标准 定义 ， 人 
们 以 不 同 的 方式 使 用 该 术语 ， 有 的 人 将 其 与 “样式 指南 ” “模式 
库 ” 这 些 词 互 换 使 用 。 在 本 书 中 ， 所 谓 设计 体系 ， 指 的 是 为 实 
现 数 字 产 品 的 目的 而 组 织 在 一 起 的 一 僚 相 关 模 式 和 共 至 实践 。 


模式 库 和 样式 指南 


模式 库 古 一 种 捕获 、 收 集 和 共 至 设计 模式 及 其 应 用 指 丙 的 工 
有 具 。 创 建 模式 库 古 民 好 设计 实践 的 一 个 样 例 。 通 弟 来 说 ， 样 式 
指南 聚焦 在 样式 上 ， 如 图 标 样式 、 颜 色 和 上 和 版式， 而 模式 库 的 苑 
了 暑 则 更 三 一 些 。 


设计 体系 的 思想 


本 书 建立 在 一 些 现实 世界 产品 的 设计 体系 相关 思想 的 基础 之 
上 上。 其 中 很 大 一 部 分 见解 源 自 我 在 FutureLearn 的 工作 经 历 。 
FutureLearn 是 一 家 位 于 伦敦 的 互联 网 开放 教育 公司 。 在 该 公司 
担任 设计 师 的 三 年 时 间 里 ， 我 见证 并 影响 了 一 套 设 计 体 系 从 最 
急 的 概念 演变 为 成 熟 体系 的 过 程 。 


除 此 之 外 ， 我 还 深入 研究 了 另外 五 家 公司 。 它 们 的 规模 各 不 
相同 ， 构 建设 计 体 系 的 方法 也 不 尽 相 同 。 这 五 家 公司 分 别 是 
Airbnb、Atlassian、 欧 洲 之 星 (Eurostar)、Sipgate 和 TED。 在 
这 18 个 月 里 ,我 采访 了 他 们 团队 的 成 员 ， 了 人 解 了 他 们 在 体系 
演进 过 程 中 面临 的 挑战 。 


Airbnb 


Airbnb 的 首席 交互 设计 师 Roy Stanfield 给 我 讲 了 很 多 关于 
Airbnb“ 设 计 语 言 体系 ”(Design Language System，DLS) 的 细 
T。DLS 的 不 同 之 处 在 于 其 严格 性 。 他 们 要 求 对 模式 进行 精确 
的 指定 和 使 用 ， 严 格 地 遵守 规则 。 为 了 实现 这 一 目标 ， 他 们 还 
制定 了 很 多 实践 指责 ， 开 发 了 很 多 实用 工具 。 不 过 ， 他 们 仍然 
面临 着 一 些 挑战 ， 包 括 新 模式 的 采用 、 整 合 新 模式 的 速度 ， 以 
及 保持 艺术 方 加 与 工程 的 同步 ， 等 等 。 


Atlassian 


Atlassian 的 设计 负责 人 Jiirgen Spangl、 首 席 设 计 师 James Bryant 
和 设计 经 理 Kevin Coffey 在 2016 年 11 月 与 我 分 享 了 他 们 对 
“Atlassian 设计 指南 ”(Atlassian Design Guidelines，ADG) 的 
看 法 。 他 们 不 仅 有 专门 的 团队 维护 设计 模式 ， 还 有 一 个 开源 模 


设计 体系 的 思想 


型 接受 页 献 。 他 们 允许 甚至 辟 励 公司 里 的 每 一 个 人 为 设计 体系 
做 贡献 。 这 种 模型 面临 的 挑战 是 平衡 以 下 两 个 方面 : 一 方面 十 
给 人 以 足够 的 目 由 去 为 设计 体系 做 页 献 ， 男 一 方面 古人 确保 对 设 
计 体 系 的 管理 始终 处 于 有 序 的 状态 。 


欧洲 之 星 


欧 测 之 星 的 解决 方案 架构 师 Dan Jackson 非常 乐于 讲述 他 们 公 
司 在 做 的 事情 。 在 本 书 搜 写 之 际 ， 他 们 正在 构建 团队 的 第 一 个 
模式 库 。 起 初 ， 他 们 过 到 了 一 些 挑战 ， 特 别 是 在 所 升 该 项 目的 
优先 级 ， 以 及 鼓励 团队 中 的 每 个 成 员 都 为 之 贡献 这 两 个 方面 。 
一 年 之 后 ， 他 们 和 争取 到 了 资源 ， 成 立 了 专门 的 团队 。 现 在 ,该 
团队 正在 主导 这 套 体 系 的 相关 工作 。 


Sipgate 


Sipgate 的 用 户 体 验 人 负责 人 Tobias Ritterbach 和 Web 开发 人 员 
Mathias Wegener 都 讲述 了 他 们 关于 工作 的 很 多 见解 。Sipgate 
的 模式 库 建 于 2015 年 ， 但 一 年 后 他 们 发 现 ， 由 于 与 产品 团队 
缺乏 沟通 ， 该 模式 库 串 括 了 过 多 的 模式 。 最 这 ， 他 们 正在 开发 
一 个 新 的 模式 库 ， 以 统一 多 个 产品 网 站 的 设计 语言 。 


TED 


2016 年 秋天 ，TED 的 用 户 体验 架构 师 Michael McWatters、 用 户 
体验 主管 Aaron Weyenberg 和 前 端 开 发 人 员 Joe Bartlett 参与 了 
一 系列 讨论 。 在 TED 网 站 团队 里 ， 少 数 用 户 体验 设计 师 和 前 端 
开发 人 员 负 责 设计 体系 的 决策 。 这 个 团队 对 他 们 的 模式 有 着 民 
好 的 共识 ， 并 用 一 种 和 催 单 的 方式 将 这 些 模式 记录 了 下 来 。 不 过 ， 
到 目前 为 止 ， 他 们 认为 疝 无 构建 一 个 全 面 的 模式 库 的 必要 。 


致 训 


我 要 感谢 FutureLearn 公司 所 有 人 对 本 书 的 支持 ， 特 别 是 以 下 几 
位 : Lucy Blackwell 审 冰 了 本 书 初稿 ， 给 了 予 了 很 多 指导 并 激励 
我 做 到 最 好 ，Mike Sharples 针对 初稿 提出 了 很 多 令 人 深思 的 反 
馈 ， 给 我 带 来 了 更 大 的 挑战 ，Gabor Vajda 为 书 中 很 多 想法 的 确 
定 提 供 了 帮助 ，Jusna Begum 帮 我 梳理 了 思路 ，Sam McTaggart、 


Dovile Sandaite、 Kieran McCann、 Storm MacSporran、 Katie 
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特别 感谢 那些 愿意 与 我 分 享 经 验 和 观点 的 人 们 ， 本 书 的 很 多 材 
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(D Smashing 是 本 书 英文 版 的 出 版 机 构 , 亦 是 Web 设计 领域 知名 的 在 线 杂 志 。 
译 者 注 
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的 支持 ， 这 是 不 可 能 完成 的 。Alyona， 对 不 起 ， 因 为 忙 着 工作 ， 
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设计 体系 


在 Web 领域 的 社区 里 ,， “设计 体系 ”(design system) 一 词 没 有 
标准 的 定义 ， 人 们 以 不 同 的 方式 使 用 该 术语 。 在 这 一 章 里 ， 我 
们 将 讨论 设计 体系 的 定义 及 其 构成 。 


设计 体系 古 为 了 实现 数字 产品 的 目的 而 组 织 起 来 的 一 套 相互 天 
联 的 模式 和 共享 实践 。 模 式 指 的 是 界面 中 那些 重复 的 要 素 : 用 
户 流 程 、 交 互 方式 、 按 钮 、 文 本 框 、 图 标 、 配 色 、 排 版 、 文 
和 案 ， 等 等 。 实 践 则 古 我 们 如 何 创 建 、 捕 获 、 共 享 和 使 用 这 些 模 
式 ， 尤 其 十 在 团队 协作 时 做 这 些 事 情 的 方法 。 


让 我 们 来 看 两 个 宣 无 关联 的 产品 的 界面 。 一 个 是 淘 森 路 透 的 
交易 与 市 场 分析 工 具 Eikon， 一 个 是 互联 网 教育 与 学 习 平 台 
FutureLearn ( 见 图 1-1)。 
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1-1 ( 左 ) 淘 森 路 透 Eikon 的 界面 ，( 右 ) FutureLearn 的 界面 


这 两 个 案例 展现 了 如 何 选 用 不 同 的 模式 以 实现 不 同 的 目的 。 对 
于 淘 条 路 透 来 说 ， 目 的 是 实 现 数据 处 理 、 工 具 构 建 、 快 速 扫 摘 
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及 多 任务 处 理 ， 对 于 FutureLearn 来 说 ， 目 的 是 实现 深度 阅读 、 
韭 正式 学 习 、 反 思 ， 以 及 连接 志同道合 的 人 。 产 品 的 目的 决定 
了 它 所 采用 的 设计 模式 。 


淘 条 路透 产品 的 布局 是 以 面板 和 小 部 件 为 基础 的 ， 这 样 做 会 方 
便 用 户 进行 多 任务 处 理 。 这 个 设计 很 密集 ， 整 个 界面 承载 了 很 
多 信息 。 它 使 用 了 紧密 的 间距 、 紧 竣 的 控件 、 灵 活 的 布局 和 排 
版 方式 (例如 使 用 罕 体 字体 和 相对 较 小 的 标题 )。 


相 比 之 下 ，FutureLearn 的 布局 则 宽松 得 多 。 每 个 界面 通 第 只 对 
应 一 个 任务 ， 例 如 阅读 一 篇 文章 、 参 与 一 项 讨论 ， 抑 或 是 完成 一 
次 互动 练习 。 在 这 里 ， 布 局 大 多 是 一 列 的 ， 排 版 上 则 通 彰 使 用 对 
比 强 烈 的 风格 ， 如 大 大 的 标题 、 厚 实 的 控件 及 宽大 的 留 白 。™ 


设计 模式 的 选择 受 很 多 因素 的 有 影响。 首先 ， 产 品 所 属 的 领域 及 
其 核心 功能 影响 了 功能 性 模式 (functional pattern)。 例 如 ， 为 
了 使 用 交易 和 市 场 分 析 软 件 ， 用 户 需要 熟练 掌握 任务 栏 、 数 据 
字段 和 网 格 、 图 表 等 数据 可 视 化 工具 。 对 于 在 线 学 习 网 站 ， 其 
核心 功能 是 文章 、 视 频 、 讨 论 话题 、 进 度 条 、 互 动 活动 等 。 而 
对 于 电子 商务 网 站 ， 其 核心 功能 则 很 可 能 是 产品 展示 、 和 筛选 
器 、 购 物 车 和 结账 模块 等 。 


其 次 ， 产 品 的 精神 (或 者 品牌 一 一 取决 于 你 对 品牌 的 定义 ) 也 
形成 了 塑造 产品 调 性 的 模式 ， 本 书 中 我 把 它们 称 作 感 知性 模式 
(perceptual pattern) 。 这 种 模式 包括 文案 语气 、 排 版 、 配 色 、 图 
标 样 式 、 间 距 与 布局 、 特 定 的 形状 、 交 互 、 动 画 和 声音 等 ( 见 
图 1-2)。 如 末 名 略 感 知性 模式 ， 相 同 领 域 的 产品 就 不 会 有 什么 
差异 ， 因 为 它们 的 功能 都 是 相似 的 。 


(D 这 里 选用 的 FutureLearn 的 界面 是 一 个 反思 性 学 习 的 例子 。 学 习 者 需要 
专注 于 手头 的 任务 ， 不 能 被 其 他 活动 分 心 。 这 个 界面 的 目的 就 古 创造 一 
种 让 人 感到 平静 的 沉思 氛围 。 


(9) Alana Grant 
That vaffic great 2 Tm ready to take on that sign-up flow 


到 1-2 尽管 HipChat 和 Slack 具有 相似 的 用 途 和 功能 ， 但 它们 带 
给 用 户 的 感觉 完全 不 同 ， 这 主要 因为 它们 在 界面 中 传递 了 
不 同 的 品牌 形象 


此 外 ， 模 式 还 会 受 平 台 的 惯例 影响 。 例 如 ， 一 种 平台 特有 的 设 


计 语 言 可 能 会 决定 其 产品 看 起 来 更 像 Web 产品 还 是 更 像 App。 
又 如 ， 一 个 产品 的 10S 版 可 能 跟 其 Android 版 的 感觉 完全 不 同 。 


创建 数字 产品 时 ， 通 第 有 各 种 各 样 的 模式 在 发 挥 作用 。 这 就 古 
设计 难 做 的 原因 。 不 同 的 模式 需要 相互 联系 ， 并 能 无 缝 地 衔接 
在 一 起 。 下 面 就 来 详细 地 谈 谈 模式 .。 


1.1 设计 模式 


设计 模式 (design pattern) 的 概念 最 早 是 建筑 师 克 里 斯 托 弗 … 亚 
历 山 大 (Christopher Alexander) 在 他 的 开创 性 考 作 《建筑 的 永 
恒 之 道 》 和 《建筑 模式 语言 》 中 提出 的 。 这 两 本 书 里 贯穿 始终 
的 一 个 论题 便 是 ， 为 什么 有 些 地 方 会 让 人 感到 精神 百倍 、 生 机 
勃勃 ， 而 另 一 些 地 方 则 让 人 感到 沉 问 无 比 、 训 无 生气 。 根 据 作 
者 的 观点 ， 环 境 与 建筑 向 我 们 传递 感受 的 方式 并 不 局 限于 主观 
情绪 ， 还 可 以 是 基于 某 些 有 形 的 特定 模式 产生 的 结果 。 即 使 是 
普通 人 也 可 以 学 会 并 使 用 模式 来 建造 人 性 化 的 建筑 。 


《建筑 模式 语言 》 一 书包 含 了 253 个 建筑 设计 模式 ， 大 的 如 城 
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市 和 道路 系统 的 布局 ， 小 的 如 家 庭 住宅 中 的 照明 和 家 具 。 


模式 是 一 种 用 于 解决 特定 设计 问题 的 可 复 现 、 可 复 用 的 方案 。 
每 种 模式 都 描述 了 一 个 在 我 们 的 环境 中 反复 出 现 的 问题 ， 以 及 
该 问题 的 解决 方案 的 核心 思想 。 

-一 一 克里斯托弗 .亚历山大 ,《 建 筑 模 式 语言 》 
类 似 地 ， 我 们 在 创建 界面 时 ， 也 在 使 用 设计 模式 来 解决 第 见 的 
问题 : 使 用 标签 页 将 内 容 分 成 儿 个 部 分 ， 并 表明 哪 一 个 选项 对 
应 于 当前 的 页 面 使 用 下 拉 菜 单 展示 可 供用 户 选 择 的 选项 列表 
( 见 图 1-3) 。2 
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图 Library 
Home / Library / Data « 1 2 3 4 » 二 Dider Newer 一 


1-3 Bootstrap 〈 一 个 用 于 开发 啊 应 式 网 站 的 前 端 框架 ) 的 一 些 
模式 

我 们 用 模式 来 为 用 户 提 供 反 馈 ， 显 示 流 程 中 剩余 的 步 数 ， 让 用 

户 相 互 交 流 ， 查 看 和 选择 项 目 ……: 设计 模式 可 以 向 发 和 鼓励 用 

户 ， 能 简化 任务 ， 还 能 创造 成 就 感 或 控制 错觉 ( 见 图 1-4)。 


Q) UI Patterns 网 站 ( 见 图 1-4) 展示 了 大 量 常 见 的 设计 模式 ， 并 按 目 的 和 
所 解决 的 设计 问题 对 模式 进行 了 分 类 。 如 果 想 全 面 了 解 UI 模式， 建议 
阅读 Jenifer Tidwell 的 《界面 设计 模式 》 一 书 。 
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Problem summary 


We are better at recognizing things previously experienced than we are at recalling them from memory 


Example 


What are you interested in? 


Pick whatever catches your eye...you can always fine-tune things later 


Gadgets 


1-4 ”UI Patterns 网 站 上 关于 说 服 式 模式 “记忆 识别 ”(recognition 
over recall) 的 例子 


大 多 数 设 计 模 式 邦 已 打造 成 型 并 为 人 所 熟知 。 这 些 模 式 利 用 了 
人 的 心智 模型 ， 让 设计 可 以 被 直观 地 理解 。 全 新 的 模式 则 需要 
用 户 先 对 其 进行 学 习 和 接纳 一 一 这 样 的 案例 并 不 多 见 。” 产品 
与 众 不 同 的 原因 并 不 在 于 它 所 使 用 的 模式 的 新 帘 性 ， 而 在 于 这 
些 模式 的 运用 方式 ， 以 及 它们 如 何 相互 配合 以 实现 特定 的 设计 
目的 。 


一 和 套 相 互 天 联 的 模式 构 成 了 产品 界面 的 设计 语言 。 


我 们 开始 设计 产品 的 时 候 ， 设 计 语 言 融 出 现 了 。 我 们 有 时 并 不 
知道 这 个 语言 征 什 么 样 的 。 有 时 候 ， 有 效 且 有 趣 的 设计 和 古 基 于 


J 在 滑动 手势 成 为 移动 端 产品 的 模式 之 前 ， 没 人 知道 如 何 使 用 这 种 交互 
方式 。 现 在 ,我们 却 可 以 看 到 完全 依赖 于 这 种 模式 的 产品 (如 Tinder)。 
从 使 用 人 们 熟悉 的 东西 到 探索 新 鲜 事物 的 过 渡 是 一 个 非 第 微妙 的 过 程 ， 
很 多 产品 的 生死 都 是 由 何 时 以 及 如 何 完 成 这 种 过 渡 所 决定 的 。 
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完 有 的， 我 们 很 难 准 确 地 曾 述 为 什么 要 这 样 设计 。 设 计 师 和 
开发 人 员 可 能 会 本 能 地 了 解 个 中 缘由 ， 但 直觉 并 非 总 是 可 靠 
和 可 扩展 的 。 设 计 师 Dan Mall 在 他 的 文章 Researchine Desieg7 
Systems 中 指出 ， 设 计 体系 的 一 个 主要 目标 就 是 “扩展 创意 方 
器 "。 如 果 你 需要 让 一 和 群 人 持续 可 徘 地 苯 人 循 创意 方 辐 ， 束 需要 
将 模式 明确 地 阐述 出 来 ， 并 分 享 出 来 。 


当 你 曾 述 你 的 设计 语言 时 ， 需 要 确保 它 可 操作 、 可 重 现 ， 也 就 
是 以 一 种 系统 性 的 方式 开始 这 项 工作 。 例 如 ， 与 其 讨论 如 何 调 
整 某 个 项 目 以 使 其 突出 ， 不 如 建立 一 套 “ 提 升 模 式 ”， 其 中 每 
人 Tom Osborne 的 “视觉 
音量 指南 ”(Visual Loudness Guide， 见 图 1-5) 便 是 一 个 系统 
性 地 组 织 按钮 和 链接 的 示例 。 在 这 里 ， 按 钮 和 链接 并 非 单独 列 
出 ， 而 是 成 套 出 现 ， 每 一 套 都 具有 与 其 视觉 突出 效 采 相对 应 的 
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Loudness Guide 


LINK TYPE VOLUME FREQUENCY USE 
em Graphic Scream Selectively Promotional 
so Button Yell Rare Brand, registration, help 
se | Button Shout Occasionally Editing, actions 
submit | Button Cheer Often Primary button 

Cancel Button Murmur Occasionally Secondary button 


留 1-5 Tom Osborne 的 “ 视 人 量 指 南 ” 


将 设计 语言 曾 述 出 来 可 以 更 好 地 控制 设计 体系 。 你 能 用 更 深刻 
的 方式 影响 它 ， 而 不 是 局 限于 做 小 改动 。 如 果 你 发 现 一 个 小 的 
设计 改进 能 对 用 户 体 验 产生 积极 的 影响 ， 便 可 以 将 其 应 用 于 整 
个 设计 体系 的 模式 ， 而 非 只 用 在 一 个 地 方 。 与 其 花费 数 小 时 设 
计 下 拉 染 单 ， 不 如 将 这 些 时 间 花 在 与 用 户 和 领域 专家 讨论 这 里 
是 盏 需要 一 个 下 拉 末 单 上 和 面 。 建 立 了 设计 语言 之 后 ， 你 便 可 以 
不 再 关注 模式 本 身 ， 而 是 更 多 地 关注 用 户 。 


在 这 本 书 里 ,我们 将 不 停 地 讨论 如 何 清楚 地 曾 述 、 记 录 和 共享 
数字 产品 的 模式 语言 。 并 且 ， 我 们 将 重点 关注 两 类 设计 模 云 : 
功能 性 模 藉 和 感知 性 模式 。 功 能 性 模式 表现 为 界面 上 的 具体 模 
块 ， 如 按钮、 你 题 、 表 单元 素 、 来 单 等 。 感 知性 模式 则 是 摘 述 
性 的 样式 ， 以 可 视 化 方式 表达 和 呈现 产品 的 个 性 ， 如 配色 、 排 
版 、 图 标 、 形 状 、 动 画 等 。 


不 妨 做 个 类 比 ， 功 能 性 模式 有 点 像 名 词 和 动词 ， 它 们 是 界面 中 
那些 具体 的 、 可 操作 的 部 分 ; 而 感知 性 模式 则 类 似 于 形容 词 ， 
它们 是 描述 性 的 。 例 如 ， 按 钮 是 具有 明确 功能 的 模块 ， 它 让 用 
户 能 够 提交 某 项 操作 。 但 按钮 上 的 文字 的 样式 ， 以 及 按钮 本 身 
的 形状 、 背 景色 、 填 充 、 交 互 状态 和 过 渡 动 画 不 是 模块 ， 而 是 
样式 ， 这 些 样式 接 述 了 按钮 是 什么 样 的 。 从 前 端 开发 的 角度 来 
看 ， 模 块 建立 在 HTML 的 基础 上 ， 而 感知 性 模式 则 是 典型 的 
CSS 属性 。 


设计 体系 还 包含 很 多 其 他 类 型 的 模式 : 用 户 流 程 (例如 包含 错 
误 提 示 和 成 功 消息 的 表单 的 设计 )、 面 向 领域 的 设计 模式 (如 
教育 科技 系统 的 学 习 模 式 、 电 子 商 务 模式 等 )、 说 服 式 用 户 体 
验 模 式 ， 等 等。 本 书 的 重点 是 作为 设计 体系 核心 构件 的 功能 性 
模式 和 感知 性 模式 。 


当然 ， 重 要 的 不 仅仅 是 模式 本 午 ， 还 包括 它们 古 如 何 演进 、 共 
享 、 连 接 和 使 用 的 。 
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1.2 共享 语言 


语言 是 协作 的 基础 。 如 末 你 在 一 个 团队 中 工作 ， 你 的 设计 语言 
就 需要 在 所 有 参与 产品 创建 的 人 之 间 共 享 。 如果 不 共享 语言 ， 
团队 成 员 就 无 法 有 效 地 进行 共同 创造 一 一 每 个 人 都 对 他 们 想 要 
实现 的 目标 有 痢 不 同 的 心智 模型 。 我 们 不 妨 回 到 按钮 的 例子 。 
即便 是 这 种 界面 上 最 基本 的 元 素 也 能 具有 不 同 的 舍 义 。 按 钮 到 
的 是 什么 ?一 个 有 边框 的 可 扩 击 区 域 ? 一 个 用 于 从 一 个 页 面 跳 
转 到 另 一 个 页 面 的 交互 元 素 ? 还 是 一 个 让 用 户 提 交 某 些 数据 的 
表单 元 素 ? 


Abby Covert 在 她 的 How to Make Sense of Any Mess 一 书 中 指 
出 ， 在 开始 构建 界面 之 前 ， 就 应 该 通过 讨论 、 审 议和 记录 语言 
决策 等 方式 建立 起 一 套 共 享 的 设计 语言 。 不 仅 高 等 级 的 概念 需 
要 这 样 处 理 ， 讨 论 设计 决策 的 日 帝 用 语 也 需要 如 此 。 共 享 语 
言 ， 便 意味 着 我 们 能 以 相同 的 方法 为 界面 元 素 命 名 ， 为 设计 模 
式 下 定义 ， 并 能 让 设计 文件 和 前 帝 代 码 使 用 相同 的 名 称 。 


仅仅 做 到 这 些 还 不 够 。 有 时， 团队 里 的 人 以 为 他 们 形成 了 共 
识 ， 因 为 他 们 建立 了 共享 的 词汇 表 并 已 付 诸 实践 ， 但 他 们 对 这 
些 词 的 理解 其 实 根本 不 同 。 例 如 ， 团 队 的 核心 概念 里 面 有 “ 场 
景 ”(scenario) 这 个 术语 ， 但 用 了 一 年 以 后 才 发 现 ， 团 队 里 不 
同 的 人 对 这 个 词 的 理解 完全 不 一 样 。 我 们 不 仅 要 对 语言 形成 共 
识 ， 还 要 对 语言 的 用 法 形成 共识 。 仅 仅 对 按钮 这 个 词 的 舍 义 达 
成 共识 征 不 够 的 ， 还 需要 对 不 同 育 景 、 不 同 目的 下 使 用 按钮 的 
原因 和 方法 形成 共识 。 


假设 我 们 在 界面 中 用 到 了 一 个 名 为 “序列 ” (sequence) 的 元 
素 。 妆 将 它 呈 现在 界面 上 时 ， 我 们 想 通 过 它 同 用 户 传达 的 信息 
是 ， 应 以 特定 的 顺序 按 步骤 走 完 流 程 ( 见 图 1-6)。 
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Intro 1 2 3 4 5 


1-6 “序列 ”模块 的 例子 


理想 情况 下 ， 参 与 产品 创建 的 每 一 个 人 都 应 该 知道 这 个 元 素 古 
什么 : 它 的 名 称 和 目的 古 什 么 ， 为 什么 会 被 设计 成 这 样 ， 应 该 
如 何 使 用 它 ， 以 及 何 时 应 该 使 用 它 ”。 这 种 共享 的 信息 越 多 ， 
就 越 有 可 能 恰当 地 使 用 它 。 设 计 师 和 前 端 开 发 人 员 都 应 该 了 解 
这 些 信息 ， 如 果 其 他 领域 的 人 (如 内 容 、 营 销 、 产 品 管理 等 7 
面 的 人 ) 也 了 解 其 中 的 一 些 信息 ， 那 也 是 有 好 处 的 。 


每 个 人 都 需要 知道 这 个 元 素 称 作 “序列 “， 而 不 是 “ 辐 导 控件 ” 
或 者 “一 串 气 泡 ”。 如 果 设 计 师 将 其 称 作 “一 串 气 泡 "， 开 发 人 
员 将 其 称 作 “ 辐 导 控件 ”， 用 户 将 其 视 作 一 组 标签 页 ， 就 可 以 
断定 设计 语言 没有 起 到 作用 。 为 什么 用 户 的 理解 很 重要 ? 我们 
不 妨 回顾 一 下 Don Norman 的 开创 性 闭 作 《设计 心理 学 》， 在 这 
本 书 中 ， 他 指出 ， 系 统 映 像 (界面 ) 和 用 户 模 型 (用户 通过 与 
界面 交互 而 形成 的 感知 ) 之 间 存 在 着 一 道 鸿 沟 。 如 有 果 用 户 的 交 
互 心 智 模型 与 设计 团队 提供 的 系统 映像 不 契合 的 话 ， 用 户 就 会 
不 断 地 受到 意料 之 外 的 系统 行为 的 挑战 。 有 效 的 设计 语言 可 以 
欢 合 系统 映像 和 《假设 的 ) 用 户 模 型 之 间 的 差距 。 


随 着 你 的 设计 语言 变 得 更 加 丰富、 更 加 复杂 ， 你 需要 一 种 高 效 
的 方式 来 对 其 进行 捕获 和 共 至 。 在 如 今 的 互联 网 领域 ， 模 式 库 
已 经 成 为 民 好 设计 体系 实践 的 重要 组 成 部 分 。 


QD 挑战 不 光 在 于 引入 “序列 ”的 定义 或 概念 ,还 在 于 让 人 理解 其 使 用 环境 。 
例如 ， 用 户 体验 团队 可 能 需要 在 一 个 连贯 统一 的 框架 内 实现 不 同类 型 的 
序列 (例如 对 FutureLear 来 说 ， 就 包括 课程 、 运 行 、 步 最、 用户 操作 
等 多 种 元 素 的 序列 )。 


设计 体系 


1.3 ”模式 库 及 其 局 限 性 


设计 体系 不 仅 包 括 模式 ， 还 包括 一 系列 用 于 创建 、 捕 获 、 共 享 
和 发 展 这 些 模式 的 技术 和 实践 。 模 式 库 不 仅 包 含 收集 、 存 储 和 
共享 设计 模式 的 工具 ， 还 包含 相应 的 使 用 原则 和 操作 指责 。 尽 
管 模式 库 近 来 在 网 上 流行 起 来 ， 但 是 用 各 种 形式 记录 和 共享 设 
计 模 式 的 理念 由 来 已 入。 


帕 拉 第 奥 (Palladio) 的 《建筑 四 书 》 于 1570 年 在 威尼斯 首次 
出 版 ， 它 是 建筑 领域 最 为 重要 且 最 具 影响 力 的 图 书 之 一 。 该 书 
也 是 最 早 的 系统 化 文档 的 例子 之 一 。 帕 拉 第 奥 从 十 希腊 和 十 罗 
马 式 的 建筑 中 汲取 灵感 ， 为 设计 和 建造 建筑 物 提 供 了 规则 和 词 
汇 表 ， 包 括 原 则 和 模式 ， 并 且 详 细 讲 述 了 它们 的 工作 原理 ( 见 
图 1-7)。 


图 1-7 楼 梯 的 类 型 : 蝶 旋 式 、 椭 圆 式 和 直线 式 。 对 于 每 一 种 类 型 ， 
由 拉 第 奥 都 说 明了 如 何以 及 何 时 使 用 它们 。 例 如 ， 螺 旋 式 
楼 梯 适 用 于 “非常 受 限 的 位 置 ， 因 为 相 较 于 直线 式 楼 梯 ， 
它 占 用 的 空间 更 少 ， 但 也 更 难 爬 ” 
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图 灵 社 区 会 员 ChenyangGao(2339083510@qq.com) 专 享 尊重 版 权 
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在 现代 视 完 设计 领域 , 早 就 有 了 关于 设计 体系 的 记载 ， 从 对 早 
期 排版 和 网 格 系统 的 说 明 ， 到 包 紧 斯 (Bauhaus) 设计 原则 。 在 
过 去 的 几 十 年 里 ， 很 多 公司 都 以 品牌 手册 的 形式 对 其 视觉 识别 
做 了 说 明 ，1975 年 NASA “发 布 的 《视觉 设计 标准 手册 》( 见 
1-8) 便 是 其 中 一 个 较为 著名 的 例子 。 
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如山 山 
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NO 
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==| = 


rp 


1-8 NASA《 视 觉 设 计 标准 手册 》 中 的 布局 指南 


在 网 上 ,很 多 模式 库 起 初 都 是 对 品牌 标志 文档 (主要 用 于 说 明 
标志 处 理 、 企 业 价值 和 品牌 样式 ) 的 扩展 ， 如 排版 和 配色 “。 
后 来 它们 才 把 对 界面 模块 的 定义 和 使 用 方法 宫 括 进来 。Yahoo 
公司 的 模式 库 便 是 界面 模式 文档 的 早期 案例 之 一 〈 见 图 1-9)。 


Q) NASA 是 美国 宇航 局 的 简称 。 译 者 注 

@) 由 此 可 以 看 出 如 何 区 分 样式 指南 和 模式 库 。 传 统 的 样式 指南 仅 针 对 样式 
(如 配色 和 排版 ), 而 模式 库 则 可 以 包括 样式 和 其 他 内 容 , 如 功能 性 模式 、 
设计 原则 等 。 
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Ss S n r L ore Y 
YAHOO! | Search YDN | MyApps ”Signin 
DEVELOPER NETWORK L | 
Accordion Pattemn information 
RELATED PATTERNS 
Beta ast modified October 5, 2009 
- Collapse 
- Animate 
An accordion (or accordion menu) is a grouped set BO ET 
of collapsible panels that provides access to a Another race, another excuse for Junior| NASCAR 出 | : Ss ON YAHOO 
large number of links or other selectable items in a Dan Wetzel February 15, 2009 er Sports 
constrained space. Draftplck compensation rules might bend| ML8 ”出 CODE EXAMPLES 
Joff Passan Foebruary 16, 2009 - Accordi 
Each inlaid panel may be individually expanded sents a Widget 
(usually leaving the rest collapsed), generally by Shaq Is last rising Sun Ss 'y , 
hovering on or clicking the title of (or an ido Wed Fen ey Sn 
Sheaullle ONeal's entertainment can' SIMILAR PATTERNS IN OTHER LIBRARIES 
expand/collapse element on) the specific panel, to q - Accordion Menu (Ul-patterns.com) 
display a single subset of the options. mask he bungied firing of Terry Porier and Accordion (welie.com) 
lingering trade talks. Read More 


- Closable Panels (designinginterfaces.com) 
- Accordion (designofsites.com) 


View Adrian Woinarowski Archive 


Happy Hour Post-500 hangover| NASCAR 四 -Accordion Spec(Sun 
Jay Hart February 17, 2009 - Tab Panel (AOL DHTML Style Guide) 
BLOG 
View Al Yahool Sports Experts » - Blog Article 
Delicious Bookmark this on Delicious > LAYOUT 
Y NAVIGATION 


What Problem Does This Solve? Accordion 


When there are too many items to fit into a limited space or when the number of items, if displayed all at once, API ER 
would overwhelm the user, then the question is how to give the user access to all of the items in digestible chunks Breadcrumbs 
and without requiring scrolling, which can remove the user from the context or page position they may prefer. 


Pagination 
ltem Pagination 
Whento Use This Pattern Search Pagination 
Use when the number of options is large, the space is constrained, and the list of items can be logically grouped ene 
into smaller, roughly equal sized chunks， Module Tabs 
Navigation Tabs 


1-9 Yahoo 公司 的 模式 库 契 界面 模式 文档 的 早期 和 案例 之 一 


对 于 那些 资源 相对 不 足 的 公司 而 言 ， 模 式 库 常 以 PDF 或 维基 
的 形式 存在 ， 这 意味 着 它 是 静态 的 ， 难 以 保持 更 新 。 如 今 ， 很 
多 设计 师 和 开发 人 员 都 希望 建立 更 加 动态 的 模式 库 ， 或 者 称 为 
“ 活 的 ”模式 库 ( 见 图 1-10) ， 它 不 仅 包 含 设计 模式 ， 还 包含 用 
于 构建 它们 的 实际 代码 。 动 态 样 式 指责 或 模式 库 不 止 是 参考 文 
档 ， 而 古 可 以 用 于 数字 产品 界面 创建 的 实际 工作 模式 。 


Q) 维基 (wiki) 并 不 是 指 维 基 百 科 (Wikipedia) ， 维 基 指 的 是 一 种 多 人 协 
作 的 文档 系统 ， 包 括 维基 百科 在 内 的 很 多 系统 均 是 使 用 维基 的 例子 。 
一 一 译 者 注 
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所 


Grid system Form Elements 
Typography 
Form Elements Buttons Select _ Inputs Field help Checkboxes & Radios 
Navigation 
Buttons 
Tables 
Example 
Lists 
ats 
Stats/Data 
Feedback 1 <button class="button">Standard</ Notes 
button> Buttons are categorized by style (standard, 
Dialogs 2 <button class="button pO">Primary primary, and primary variants) and size 
action</button> (regular and large). 
Freddicons ; <button class="button pl'">Send No 
Regular buttons are 32px high with a font size 
w</button> 


Helper Classes | ER Elaeenbotton oneees ih of 13px. Large buttons are 48px high with a 
2 : font size of 15px. We don't use large buttons 
is Delivery</button> 


often. 


1-10 ”MailChimp 的 模式 库 是 网 上 动态 模式 库 里 最 有 影响 力 的 
早期 案例 之 一 


模式 库 的 局 限 性 


有 人 将 模式 库 等 价 于 设计 人 体系。 然而， 即便 征 最 为 全 面 的 动态 
模式 库 ， 也 不 能 称 作 设计 体系 。 它 只 十 有 助 于 设计 体系 变 得 更 
加 有 效 的 一 种 工具 。 


仅仅 拥有 模式 库 还 无 法 保证 建立 连贯 且 一 致 的 设计 。 它 可 能 
助 于 纠正 一 些小 的 不 一 致 的 错误 ， 或 让 代码 库 更 加 稳健 ， 但 仅 
赁 工具 是 无 法 对 用 户 体验 产生 重大 影响 的 。 


模式 库 无 法 让 糟糕 的 设计 变 好 。 模 式 可 能 本 里 就 设计 得 不 好 、 
用 得 不 对 ， 或 者 与 整体 不 协调 。 正 如 TED 的 用 户 体 验 架 构 师 
Michael McWatters 在 接受 采访 时 指出 的 那样 :“ 如 琳 设 计 思 想 
不 到 位 ， 即 便 是 Squarespacey 的 模板 也 可 能 被 糟 踢 。” 反 过 来 
说 ， 即 便 疫 有 全 面 完整 的 模式 库 ， 也 可 以 创建 出 具有 连贯 用 户 


CD Squarespace 是 音 名 的 建站 工具 ， 它 包含 大 量 高 质量 的 模板 。 一 一 译 者 注 
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体验 的 产品 〈 第 6 章 TED 设计 体系 的 例子 会 印证 这 一 点 )。 


构建 动态 模式 库 需 要 更 好 的 协作 。 如 末 团 队 之 间 缺 乏 沟 通 ， 很 

可 能 导致 只 有 一 小 部 分 人 在 用 它 ， 或 者 产生 大 量 披 此 割裂 的 模 
式 。 如 琳 能 保持 更 新 ， 模 式 库 便 可 以 成 为 共 译 语言 的 词汇 表 。 
但 这 并 不 意味 腹 不 必 再 对 其 进行 解释 说 明 。 那 些 有 关 如 何 对 模 
却 进 行 解释 的 讨论 ， 毅 前 契 决 定 模式 库 成 败 的 关键 。 


不 过 ， 有 时 模式 库 也 受到 了 批评 ， 因 为 它 扼杀 了 创造 力 ， 容 易 
导致 开发 出 外 观 千 篇 一 律 的 网 站 。 对 此 需要 指出 ， 模 式 库 是 对 
其 背后 设计 体系 的 反映 。 如 果 设 计 体 系 本 身 就 很 严格 ， 限 制 很 
多 ， 那 么 横 式 库 便 可 以 体现 出 这 种 刚性 。 a 
做 大 量 创造 性 的 试验 ， 那 么 好 的 模式 库 只 会 让 这 种 试验 变 得 更 
加 容易 。 


现在 世面 上 已 经 有 很 多 自动 化 工具 和 样式 指南 生成 器 ， 建 立 一 
套 组 件 库 比 以 前 快 多 了 。 但 如 采 设 有 一 套 连 贯 的、 集成 了 模 却 
和 实践 的 设计 体系 作为 基础 ， 这 样 的 组 件 库 的 影响 将 十 分 有 

只 有 将 模式 库 作为 构建 坚实 的 设计 语言 的 基础 ， 它 才 会 成 
为 强大 的 设计 工具 和 协作 工具 。 人 耕 则 ， 它 就 只 是 网 页 上 模块 的 
集合 而 已 。 


1.4 构建 有 效 的 设计 体系 


如 何 衡量 设计 体系 的 有 将 性? 可 以 看 它 的 不 同 部 分 一 起 发 挥 作 
全 帮助 实现 产品 目的 的 程度 。 例 如 ，FutureLear 的 目的 是 

每 个 人 在 任何 地 方 都 能 终 届 学习 。 于 是 ， 我 们 可 以 去 看 昼 
A ee eh a 
这 些 设 计 实践 的 效果 如 何 。 如 果 和 界面 混乱 ， 导 致 无 法 实现 上 述 
目标 ， 那 么 可 以 认为 这 套 设 计 语 言 是 无 效 的 。 如 本 为 网 站 添加 
一 个 新 模块 花 了 很 长 时 间 〈 因 为 每 次 都 必须 从 头 开 始 新 建 模 
式 )， 那 么 可 以 断定 这 些 实践 方法 还 需要 改进 。 
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只 有 妆 设 计 体系 围绕 产品 目的 ， 综 合 了 设计 过 程 中 的 成 本 效益 
及 用 户 体 验 的 效率 和 满意 度 时 ， 它 才 是 有 效 的 。 


1.4.1 共享 目的 


在 《系统 之 美 》 一 书 中 ， 作 者 Donella Meadows 指出 ， 系 统 
最 重要 的 一 个 特性 是 其 连接 和 组 组 方式 : 子 系统 聚合 成 大 的 系 
统 ， 而 这 些 系 统 转 而 又 成 了 更 大 系统 的 一 部 分 。 肝 脏 中 的 细胞 
是 絮 官 的 一 部 分 ， 而 絮 官 古生物 体 的 一 部 分 。 没 有 哪个 系统 可 
以 独立 存在 。 你 的 设计 体系 中 可 能 有 小 一 点 的 子 体系 ， 如 用 于 
控制 页 面 布 局 的 编辑 规则 ， 又 如 某 种 啊 应 式 地 缩放 标志 的 方法 


( 见 图 1-11) 。 同 时 ， 你 的 设计 体系 又 是 一 个 更 大 的 体系 你 
的 产品 、 你 的 团队 、 你 的 公司 文化 一 一 的 一 部 分 。 

Te : 

RESPONSIVE 

W en me ,一 一 
图 1-11 惠 特 尼 美 国 亏 术 博 物 馆 的 标志 ， 一 个 “动态 的 W”， 它 本 


身 就 是 一 套 人 简单 且 适 应 性 极 强 的 体系 。 字 母 W 对 其 周转 
的 图 形 和 文字 进行 啊 应 ， 大 大 提升 了 布局 的 灵活 性 


在 高 效 的 设计 体系 中 ， 不 同 的 子 体 系 为 了 同样 的 目的 而 相互 连 
接 ， 并 协调 一 致 :设计 方法 在 前 闹 架 构 中 得 到 反映 ， 设 计 模 式 
遵循 指导 原则 ;模式 语言 在 设计 、 代 码 和 模式 库 中 得 到 一 致 的 


Q) 此 处 “系统 ”在 原文 中 与 “体系 ”为 同一 个 词 ， 即 system。 一 一 译 者 注 
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应 用 。 这 些 子 体系 运转 得 相当 和 和谐， 它们 的 工作 流程 更 高 效 ， 
用 它们 创造 出 的 用 户 体验 更 有 意义 ， 也 更 连贯 。 


1.4.2 ”识别 问题 


裂缝 总 是 很 容易 被 发 现 。 割 裂 的 设计 体系 导致 了 割裂 的 用 户 体 
验 ， 以 及 充满 矛盾 的 界面 。 我 们 既 想 让 用 户 订 阅 我 们 的 通讯 ， 
又 想 让 他 们 查看 我 们 的 最 新 产品 。 我 们 既 想 让 用 户 对 照 食谱 完 
成 一 些 步 又 ， 又 想 让 他 们 对 每 个 食谱 进行 打分 。 我 们 在 网 站 的 
某 个 区 域 用 “序列 ”来 展示 某 项 任务 的 步骤 ， 又 在 另 一 个 地 方 
将 它 用 作 标 丛 页 导航 。 界 面 上 充斥 着 同一 颜色 的 多 个 色调 ， 抑 
或 是 同一 按钮 的 多 个 版 本 。 团 队 的 工作 效率 也 大 打折 扣 : 由 于 
代码 混 邓 不 霸 ， 哪 介 征 做 个 微小 的 改动 也 相当 烦琐 而 耗 时 。 议 
计 师 把 时 间 花 在 复制 像素 上 ， 伦 在 为 同一 问题 反复 寻找 解决 方 
案 上 ， 而 不 是 花 在 理解 和 解决 实际 用 户 的 需求 上 面 。 


如 何 消除 这 样 的 裂 钨 ， 让 设计 体系 变 得 更 加 有 效 呢 ? 为 了 回答 
这 个 问题 ， 我 们 需要 理解 设计 体系 契 什 么 ， 以 及 它 契 如 何 工 作 
的 。 让 我 们 通过 一 个 人 简单 的 虚构 案例 ， 看 看 模式 语言 是 如 何 伴 
随 新 产品 发 展 的 。 


1.5 案例 :“ 十 分 钟 食 证 ”网 站 


有 这 样 一 群 人 ， 他 们 喜欢 健康 的 食品 ， 但 又 不 想 花 太 多 的 时 间 
做 饭 。 想 象 一 下 我 们 正在 开发 一 个 为 这 类 人 提供 食谱 的 网 站 。 
如 末 我 们 芳 谍 ?| 入 设计 体系 ， 并 捉 前 定义 设计 模式 ， 该 从 哪里 
下 手 呢 ? 在 开始 之 前 ， 我 们 先 做 一 些 假设 : 我 们 熟悉 逐 饪 ， 并 
且 已 经 做 了 充分 的 调研 ， 这 足以 文 撑 我们 的 设计 决策 。 所 以 ， 
接 下 来 我 们 要 关注 的 不 是 设计 出 什么 样 的 用 户 体验 ， 而 十 我 们 
为 这 个 新 网 站 构建 设计 体系 的 思维 方式 。 
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1.5.1 目的 和 价值 观 


我 们 要 做 的 第 一 件 事 就 是 弄 清 楚 用 户 古 谁 ， 他 们 的 目标 、 需 求 
和 动机 是 什么 。 为 了 简化 问题 ， 此 处 假定 我 们 已 经 知道 用 户 
征 那 些 念 碌 的 职场 人 士 ， 他 们 的 目标 是 享用 美味 又 健康 的 腾 
食 ， 却 不 用 人 花 数 小 时 县 饪 。 我 们 有 多 种 方式 帮助 他 们 实现 这 一 
目标 : 让 他 们 与 厨师 取得 联系 ， 将 美食 送 到 他 们 家 门口 ， 或 者 
开发 一 个 对 话 式 的 应 用 ， 等 守 。 但 此 处 我 们 希望 通过 构建 一 
个 “十 分 钟 食谱 ”网 站 来 实现 这 一 目标 。 我 们 可 以 用 一 句 话 来 
表述 这 个 网 站 的 目的 : 让 人 们 在 十 分 钟 内 惑 能 毫 饪 出 美味 又 健 
康 的 腾 食 。 这 个 目的 是 产品 的 核心 ， 它 应 该 文 撑 设 计 和 开发 决 
菏 。 团 队 应 该 了 解 这 个 目的 并 认可 它 ， 而 不 会 被 迫 接 受 它 。 


除了 目的 之 外 ， 男 一 个 重要 的 方面 束 古 我 们 试图 通过 网 站 传达 
的 价值 观 和 精神 。 对 于 我 们 的 网 站 来 说 ,价值观 是 让 用 户 使 用 
前 见 的 食材 ， 就 能 毫 饪 出 向 单 而 健康 的 食物 。 而 对 于 另 一 个 襄 
饪 网 站 来 说 ， 他 们 的 价值 观 则 可 能 十 塌 求 高 级 的 总 饪 ， 并 让 用 
户 擎 握 高 级 误 饪 技能 。 


1.5.2 ”设计 原则 


为 确保 我 们 所 做 的 所 有 事情 都 清晰 地 体现 了 产品 目的 ， 我 们 需 
要 建立 一 些 基 本 原则 和 价值 观 。 可 以 非 正 式 地 讨论 ， 也 可 以 写 
下 来 形成 宣言 。 重 要 的 是 参与 产品 创建 的 人 都 认同 这 些 价值 
观 ， 并 承诺 实践 它们 。 


例如 ， 十 分 钟 食 详 网 站 团队 的 每 个 人 都 需要 了 解 时 间 的 价值 。 
他 们 需要 时 刻 谨 记 食 谱 是 有 时 间 限 制 的 ， 因 此 他 们 会 努力 让 网 
站 的 交互 变 得 人 简短、 快速 和 流畅 。 


这 一 原则 不 仅 体 现在 设计 模式 上 ， 还 体现 在 网 站 的 性 能 、 说 话 
的 语气 ， 其 至 团队 的 运作 方式 上 耐 。 
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这 些 原则 不 一 定 古 很 正式 的 ， 其 至 不 一 定 要 写 下 来 。 但 是 ， 团 
队 成 员 应 就 这 些 内 容 达 成 一 至， 这 对 于 让 每 个 人 的 工作 和 优先 
级 保持 同步 至 关 重 要 。 这 些 内 容 还 能 辅助 决策 : 从 先 实 现 哪些 
功能 、 使 用 何 种 方法 ， 到 制定 用 户 体 验 流 程 、 设 计 按 钮 外 观 、 
选择 字体 ， 等 等 。” 


1.5.3 ”行为 和 功能 性 模式 


我 们 确定 了 希望 用 户 实 现 或 让 用 户 有 能 力 实现 的 主要 行为 ， 这 
会 帮助 用 户 实现 他 们 的 目标 。 


口 我 们 希望 人 们 选择 在 家 总 饪 健康 的 食物 ， 而 不 古 选 择 快餐 和 
微波 炉 食 物 。 这 意味 着 我 们 的 膳食 需要 看 起 来 美味 且 健 康 ， 
比 短波 炉 食物 更 加 旅人。 为 此 ， 我 们 需要 制作 精美 的 图 片 ， 
呈现 出 让 人 垂 诞 而 又 简单 方便 的 食物 。 

D 我 们 希望 人 们 在 十 分 钟 之 内 就 能 做 出 好 六。 这 意味 看 我 们 的 
食谱 只 需要 简单 几 步 就 能 完成 。 这 些 步 又 应 该 创 短 、 清 晰 且 
重点 突出 。 兴 许 我 们 还 可 以 为 每 一 步 标注 时 间 ， 确 保 总 时 长 
在 十 分 钟 以 内 。 

口 我 们 希望 人 们 的 甩 饪 行为 是 目 发 的 ,念佛 随时 都 可 以 开始 。 
他 们 可 以 利用 现 有 的 材料 ， 而 不 必 人 谁 备 什么 一 一 他 们 不 需要 
购买 不 常见 的 食材 。 在 用 户 界 面 层面 ， 这 意味 着 需要 使 用 带 
有 请 晰 标注 的 食材 缩 略 图 。 

D 我 们 希望 歌 励 人 们 发 挥 创造 力 ， 你 持 目 信 ， 并 享受 乐趣 。 我 
们 会 显示 哪些 食材 是 可 选 的 ， 并 告诉 人 们 可 以 替换 为 其 他 哪 
些 食材 。 我 们 可 以 展示 一 些 有 趣 的 .让 人 意 想 不 到 的 组 合 。” 


Q) 第 2 章 将 更 详细 地 介绍 有 效 设 计 原 则 的 特性 ， 以 及 它们 是 如 何 构成 设计 
语言 的 基础 的 。 

@) 关于 如 何 理解 人 们 想 要 什么 ， 并 据 此 形成 新 产品 的 愿景 ， 请 参阅 Slack 
的 CEO Stewart Butterfield 的 文章 We Don’t Sell Saddles Here。 
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设计 的 细 证 固然 会 随 着 网 站 的 改版 而 变化 ， 但 上 述 关 键 行为 将 
始终 你 持 不 变 。 这 些 行为 足以 体现 网 站 的 核心 功能 模块 和 交互 
方式 : 食材 缩 略图 、 食 谱 卡 片 、 分 步 序列 、 计 时 丛 等 。 


1.5.4 审美 和 感知 性 模式 


与 此 同时 ， 我 们 需要 弄 清 杷 ， 我 们 希 时 人们 在 使 用 十 分 钟 吉 人 饪 
食谱 网 站 时 有 什么 感受 。 我 们 是 踏实 、 人 简单 的 ， 还 十 炫目 、 复 
杂 有 的 ?我 们 是 严肃 有 的， 还 是 搞笑 的 ?是 大 胆 的 ， 还 是 克制 的 ? 
征 讲求 实用 的 ， 还 是 妃 求 情怀 的 ? 哪些 视觉 效 末 能 体现 出 我 们 
想 要 通过 界面 反映 的 网 站 个 性 和 精神 ? 为 了 解答 这 些 问题 ， 我 
们 可 以 从 思考 品牌 人 手 。 


我 们 对 健康 的 食品 充满 热情 ， 所 以 希望 整个 网 站 都 能 体现 这 一 
扩 。 或 许 网 站 要 有 一 种 有 机 、 温 暧 、 有 益 健康 的 感觉 。 我 们 也 
相信 总 饪 不 需要 进行 大 量 的 规划 和 准备 ， 它 应 该 是 自发 的 、 有 
趣 的 ， 可 以 在 十 分 钟 内 进行 试验 和 创新 。 


基于 此 ， 我 们 可 以 将 一 些 情绪 和 感觉 写 下 来 ， 并 开始 尝试 一 些 
视觉 效果 ， 直 到 品牌 的 感觉 符合 预期 。” 之后， 我 们 便 可 以 开 
定义 核心 视觉 品牌 元 素 ， 例 如 排 上 有 版、 配色、 说话 的 语气 语调 
以 及 任何 表现 品牌 独特 性 的 元 素 。 如 插图 、 图 片 样式 、 特 定形 
状 、 独 特 交 互 等 ， 这 些 都 能 体现 我 们 服务 的 本 质 ， 并 能 以 最 佳 
方式 呈现 内 容 。 


最 终 ， 我 们 有 了 温暖 又 朴实 的 配色 、 手 绘 的 图 标 、 可 读 性 极 强 
的 排版 、 高 质量 的 健康 饮食 照片 ， 以 及 一 些 人 简单 的 界面 元 泰和 
控件 。 这 些 风格 样式 便 构成 了 我 们 的 感知 性 模式 。 


(D 第 4 章 会 详细 介绍 定义 感知 性 模式 的 过 程 。 
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1.5.5 ”共享 语言 


除 此 之 外 ， 我 们 还 需要 对 一 些 概念 下 定义 ， 也 就 是 对 设计 语言 
进行 决策 。 什 么 是 “食谱 ? “步骤 的 含义 是 什么 ? 什么 是 
简单 轻松 ”的 交互 ? 我 们 选择 的 词语 将 会 影响 团队 的 思考 方 
式 ， 因 而 也 会 间接 地 影响 设计 。 


一 开始 ， 可 以 用 一 种 非 正 式 的 方式 共 至 所 选 的 模式 和 语言 。 但 随 
着 团队 和 产品 的 发 展 ， 语 言 也 需要 改变 。 取 终 ， 我 们 需要 用 一 种 
更 加 结构 化 的 方式 来 捕获 、 共 享 和 组 织 我 们 的 设计 词汇 表 。™ 


至 此 ， 我 们 已 经 通过 一 个 虚构 的 网 站 简单 地 了 解 了 整个 设计 体 
系 的 构建 过 程 ， 接 下 来 将 通过 一 些 真 实 的 数字 产品 和 公司 的 策 
例 ， 来 看 看 设计 体系 是 如 何 演变 和 发 展 的 。 


J 在 第 5 革 中 ,我们 将 看 到 有 效 的 名 称 和 协作 式 的 命名 过 程 是 如 何 成 为 设 
计 语 言 体系 的 基础 之 一 的 。 在 第 10 章 中 ， 我 们 将 看 到 模式 库 是 如 何 成 
为 一 种 捕获 用 语 、 建 立 共 享 词汇 表 的 方式 的 。 
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第 2 草 

SS 四、 

设计 原则 

坚实 的 原则 是 任何 设计 体系 得 以 良好 运转 的 基础 。 在 这 一 齐 


中 ， 我 们 将 讨论 有 效 的 设计 原则 有 哪些 特性 ， 还 将 讨论 定义 这 
些 原 则 的 万 法 。 


上 一 革 ， 我 们 探讨 了 设计 界面 时 从 产品 的 目的 和 价值 观 入 手 的 
重要 性 。 明 确 目 的 非 第 重要 ， 因 为 其 他 所 有 有 的 决策 帮 以 此 为 依 
据 ， 哪 怕 是 间接 地 以 此 为 依据 。 


我 们 如 何 确 保 产 品 的 目的 在 设计 中 得 到 体现 呢 ? 那 就 是 建立 一 
套 基本 的 价值 观 和 原则 。 


在 一 些 公司 里 ， 尤 其 是 在 处 于 初创 期 的 公司 里 ， 答 试 建立 一 套 
共同 的 准则 是 很 难 的。 设计 原则 古 无 法 量化 的 ， 因 此 定义 这 些 
原则 可 能 需要 多 次 迭代 。 


对 于 原则 到 的 是 什么 ， 也 可 能 存在 一 些 和 争议 。 有 些 公司 的 设计 原 
则 偏重 于 品牌 ， 有 的 偏重 于 团队 文化 ， 有 的 则 偏重 于 设计 流程 。 
例如 ，Pinterest 的 设计 原则 便 偏 重 于 品牌 (如 “清晰 易 履 ”“ 充 
满 活力 “ 牢 不 可 破 ” 等 )， 英 国政 府 数 字 服 务 小 组 制定 的 原则 则 
偏重 于 团队 的 运作 方式 〈 如 “精简 “重复 再 重复 ”等 )。 


有 上 时候， 设计 原则 仅 适 用 于 有 限 的 一 段 时 期 ， 或 仅 适 用 于 特定 
的 项 目 。 设 计 师 Dan Mall 喜欢 在 每 个 项 目 开始 的 时 候 写 一 份 
“设计 宣言 ， 以 确 休 创意 的 方 同 和 目标 被 清楚 地 表达 出 来 。 有 
时 候 ， 设 计 原 则 更 为 持久 ， 其 成 琳 其 至 成 为 了 公司 理念 的 一 部 
分 。Jack Daniel’s 酒 广 的 价值 观 是 “信任 ” “独立 ”和 “诚实 ”， 
这 些 价值 观 在 一 个 世纪 里 一 直 设 有 变 过 。 
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大 一 些 的 公司 可 能 会 对 用 户 体 验 、 品 牌 和 设计 体系 分 别 建立 不 
同 的 原则 。” 此 外 ， 同 一 个 公司 的 不 同 团队 也 可 能 拥有 各 自 的 
团队 准则 。 虽 然 有 人 认为 这 起 可 接受 的 ， 但 也 有 人 认为 拥有 多 
套 准 则 容易 导致 设计 体系 的 分 裂 。 


Atlassian 是 一 家 企业 软件 公司 。 起 初 ， 他 们 针对 市 场 稼 销 和 针 
对 产品 的 原则 是 不 同 的 。 随 着 时 间 的 推移 ， 他 们 和 逐 壮 融 合 了 这 
些 原 则 ， 形 成 了 一 套 统 一 的 理念 ， 鸣 合 了 市 场 理 销 、 产 品 设计 
和 服务 支持 等 工作 领域 乙 间 的 裂 笑 。 现 在 ， 他 们 正 基于 一 套 统 
一 的 原则 开展 各 项 工作 。 


这 是 一 套 统一 的 体系 。 设 计 原 则 将 散落 的 点 串联 了 起 来 。 
Jiirgen Spangl，Atlassian 公司 设计 负责 人 


Atlassian 公司 并 没有 和 针对 不 同 的 团队 或 者 针对 设计 体系 的 不 同 
部 分 分 别 制定 不 同 的 原则 ， 他 们 的 目标 是 在 客户 可 触及 的 每 一 
点 上 都 体现 一 些 核心 的 价值 观 ， 比 如 “大 胆 “乐观 “实用 但 
不 乏味 ”。 不 过 ， 尽 省 各 处 的 价值 观 是 相同 的 ， 但 体现 程度 并 
不 一 样 。 


例如 ， 网 站 的 销售 和 市 场 香 销 模块 加 会 较 多 地 体现 “大 胆 ， 
从 而 增强 产品 展示 的 效果 ， 并 帮助 客户 了 解 产 品 的 价值 。 但 
是 ， 一旦 进入 产品 本 身 及 服务 支持 版 块 ， 网 站 的 体验 就 会 更 多 
地 倾 问 于 帮助 用 户 完 成 工作 ， 尽 可 能 地 提高 效率 ， 所 以 减弱 了 
大 胆 ” 的 感觉 ， 增 加 了 “实用 ”的 价值 。 正 如 Atlassian 公司 
的 设计 经 理 Kevin Coffey 所 说 的 ,“ 没 有 人 和 想 要 一 个 “大 胆 的 
服务 支持 页 面 。 


QQ) Google 公司 有 一 份 流传 其 广 的 设计 原则 ， 那 是 一 些 很 宽泛 的 准则 ， 例 
如 “以 用 户 为 中 心 ， 其 他 的 自然 水 到 渠 成 ”。 在 建立 Material 设计 语言 
的 时 候 ，Google 公司 则 提出 了 一 些 更 为 具体 的 原则 ， 例 如 “动画 需要 
表现 一 定 的 意义 ”。 
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2.1 有 有效 设计 原则 的 特性 


对 于 构建 设计 原则 ， 每 个 公司 都 有 目 己 独特 的 方法 ， 其 表现 形 
式 也 不 尽 相 同 。 设 计 原 则 可 以 古 笼 统 的 ， 也 可 以 古 具 体 的 ;可 
以 是 临时 的 ， 也 可 以 是 持久 的 。 重 要 的 是 ， 这 些 原 则 如 何 有 效 
地 统一 团队 的 设计 思想 ， 并 且 引 领 创 意 的 方向 。 在 本 书 中 ， 设 
计 原 则 指 的 是 包含 团队 如 何 理解 好 设计 之 精髓 ， 以 及 如 何 体现 

一 精髓 之 建议 的 共享 指南 。 换 句 话 说， 束 定 让 你 的 机 构 或 你 
的 产品 ， 对 于 什么 古 好 的 设计 ， 有 一 致 的 标准 。 


无 论 你 用 什么 样 的 方法 打造 这 份 指南 ， 有 效 的 指南 通常 具有 以 
下 特性 。 


2.1.1 设计 原则 是 真实 而 贴切 的 


我 相信 你 一 定 很 熟悉 这 样 的 原则 :“ 人 简单 “实用 “ 令 人 愉 
快 。 这 样 的 话 无 处 不 在 ， 我 们 在 哪儿 都 能 听 到 。 尽 管 设 计 民 
好 的 产品 无 疑 都 遵循 一 套 共 同 的 原则 〈 例 如 迪 特 ' 拉 姆 斯 的 设 
计 十 诚 “), 但 是 这 样 的 特性 应 该 是 与 生 俱 来 的 (在 设计 的 时 候 
就 萎 虑 到 )， 就 像 可 访问 性 、 性 能 竺 关键 点 一 样 。 


我 无 法 想象 一 球 消 费 类 数码 产品 的 设计 原则 是 “复杂 ” “无 
用 “让 人 痛 吉 。 


站 出 你 的 产品 应 该 是 有 用 的 、 令 人 恰 快 的 ， 这 对 你 做 设计 决策 
没有 多 大 帮助 ， 因 为 这 些 特 性 可 以 用 不 同 的 方式 来 解释 。 乔 明 
日 这 些 词 对 你 的 团队 和 你 的 产品 究 竞 意味 着 什么 ， 才 是 对 做 设 
计 决 策 有 帮助 的 。 创 新 究 竞 需要 什么 ?什么 情况 下 你 的 设计 会 
被 认为 征 有 用 的 ? 你 如 何 判 定 设 计 征 否 真 的 令 人 愉快 ?好 的 议 


Q) 迪 特 : 拉 姆 斯 (Dieter Rams) 是 德国 著名 的 工业 设计 师 ， 他 认为 好 的 
设计 应 当 满 足 十 条 要 求 ， 这 些 要 求 被 人 称 为 “设计 十 诫 ”(The Ten 
Commandments of Good Design ) 。 一 -一 译 者 广 
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计 原 则 所 定义 的 特性 能 以 不 同方 式 解 谈 ， 但 会 将 其 放 在 特定 的 
产品 背景 之 下 。 


我 们 以 TED 为 例 。TED 的 一 条 设计 原则 古 “ 追 求 永恒 ， 而 不 
古 进 求 户 流 。 永 恒 这 个 词 不 光 体 现在 TED 的 界面 上 ， 还 体现 
在 TED 的 整个 品牌 和 设计 方法 上 。 这 苇 味 着 他 们 不 会 为 了 妃 未 
衫 流 而 采用 一 项 新 的 技术 或 5 入 一 个 新 的 设计 元 素 。 他 们 前 先 
要 服务 于 一 个 目标 ， 服 务 于 尽 可 能 多 的 用 户 。 对 TED 来 说 ， 永 
恒 不 仅 让 他 们 保持 简单 ， 还 会 提醒 他 们 避免 那些 对 用 户 没 有 实 
质 好 处 的 样式 和 功能 。 例 如 ， 如 末 东 种 视差 效 采 并 不 能 解决 真 
正 的 设计 问题 ， 那 么 即使 感觉 非 营 六 畅 ， 他 们 也 不 会 ?1 入 。 


2.1.2 ”设计 原则 是 实用 的 、 可 操作 的 


设计 原则 应 该 就 如 何 帮 产品 解决 设计 回 题 提供 实用 的 指导 。 下 下 
面 我 们 对 比 一 下 FutureLearn 的 一 条 设计 原则 的 两 个 版 本 。 


简化 。 让 产品 尽 可 能 简单 ， 简 单 到 几乎 感觉 不 到 它 的 存在 ! 我 
们 应 该 努力 消除 平台 上 的 摩 探 ， 为 用 户 创造 一 种 可 自由 地 获取 
内 容 的 体验 。 如 果 我 们 的 平台 让 人 很 容易 理解 ， 那 么 人 们 就 会 
县 多 地 全 用 亿 。 


这 段 话 无 可 辨 台 一 一 没有 人 会 认为 我 们 不 需要 简洁 实用 的 用 户 
界面 。 不 过 ， 这 段 话 并 没有 明确 地 指出 “人 简化” 完 竞 古 什么 意 
思 ， 如 何 才能 做 到 “简化 。 不 妨 再 看 看 另 一 个 版 本 。 


消除 无 用 的 部 分 。 每 一 个 设计 元 素 ， 无 论 大 小 ， 都 必须 有 一 个 
目的 ， 并 这 御 它 所 属 元 素 的 目的 。 如 果 你 无 法 解释 一 个 元 素 为 
什么 要 在 那里 ， 那 么 它 便 很 可 能 不 应 该 在 那里 。 


在 实践 中 ， 回 答 “ 是 否 足 够 简单 ” 比 回 答 “ 是 否 包 含 不 必要 的 
东西 ”要 难得 多 。 这 是 因为 只 需要 浏览 一 过 界 面 ， 问 一 问 每 个 
元 素 存 在 的 目的 ， 束 可 以 回答 后 一 个 回 题 。 
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如 采 想 让 设计 原则 更 为 实用 ， 就 不 要 让 它们 成 为 只 是 听 起 来 不 
错 的 东西 ， 而 应 该 提供 可 操作 的 建议 。 你 可 以 设想 自己 古 在 做 
这 样 一 件 事 : 一 个 新 人 加 入 了 你 的 团队 ， 你 需要 向 他 解释 ， 在 
你 的 项 目 中 做 设计 时 最 重要 的 五 件 事情 是 什么 。 


如 采 你 告诉 他 “我 们 喜欢 令 人 愉悦 的 界面 。 我 们 的 界面 一 定 要 
令 人 愉悦 ! “， 可 能 对 他 的 工作 没有 任何 帮助 。 你 需要 说 清楚 
令 人 愉悦 究竟 意味 着 什么 ， 并 分 享 一 些 在 你 的 界面 中 用 到 了 令 
人 愉悦 的 元 素 的 实际 案例 。 


让 我 们 来 看 几 组 让 设计 原则 变 得 更 为 实用 的 例子 。 


模糊 的 设计 原则 : “明确 。 
实用 的 设计 原则 :“ 第 一 优先 级 只 有 一 个 。 什 么 是 你 希望 用 户 
了 最 先 看 到 的 或 最 先 用 到 的 ? 


模糊 的 设计 原则 : “简单 。 
实用 的 设计 原则 :“ 把 表面 做 到 牢 不 可 破 。 束 像 儿 童 玩具 一 样 ， 
确保 用 户 可 以 随意 探索 ， 不 会 因为 错误 操作 而 崩 涡 。”™ 


模糊 的 设计 原则 :“ 有 用 。 

实用 的 设计 原则 :“ 从 需求 开始 。 如 有 条 你 不 知道 用 户 需 要 什么 ， 
就 无 法 做 出 正确 的 事情 。 去 做 调研 ， 去 分 析 数 据 ， 去 与 用 户 交 
流 ， 而 不 是 做 假设 .”” 


但 是 ， 即 便 是 文字 极 佳 的 原则 仍然 存在 多 种 解读 方式 。 只 有 将 
原则 与 应 用 原则 的 真实 案例 结合 起 来 ， 才 是 最 为 实际 的 做 法 。 


你 可 以 去 界面 中 寻找 那些 体现 原则 的 地 方 ， 再 将 这 个 真实 的 例 
子 同 原则 放 在 一 起 。 你 能 人 耕 找 到 一 个 地 方 ， 它 清楚 地 体现 了 
“第 一 优先 级 只 有 一 个 ”的 原则 ? 你 能 人 否 展示 一 个 模式 ， 尽 管 
有 着 丰富 的 交互 ， 却 真正 做 到 了 “ 牢 不 可 破 ”? 


GD Pinterest 的 设计 原则 。 
Q) GDS 的 设计 原则 。 
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2.1.3 ”设计 原则 是 有 观点 的 


设计 古 由 我 们 所 做 的 选择 所 塑造 的 。 这 个 页 面 应 该 妃 求 视 寅 效 
采 ， 还 是 应 该 更 具 实用 性 ? 这 里 应 该 更 笑谈 ， 还 下 应 该 更 严 
肃 ? 如 末 提 升 模块 可 用 性 的 同时 知 要 降低 其 灵活 性 ， 古 任 还 要 
这 样 做 ? 


要 达成 一 些 事项 ， 我 们 常常 不 得 不 对 人 说 “不 ”。 即 使 需要 考 
虎 一 些 相互 冲突 的 因素 ， 好 的 设计 原则 也 能 帮 我 们 确定 优先 级 
和 平衡 点 。 


我 们 来 看 接 下 来 的 这 个 例子 。Salesforce 公司 的 Lightning 设计 
体系 的 原则 是 “清晰 、 高 效 、 一 致 、 美 观 ”。 该 体系 强调 ， 这 
些 原则 的 优先 级 必须 遵从 以 上 顺序 。 “美观 ”不 应 该 高 于 “高 
效 ” 和 “一 致 ， 而 “清晰 ”应 该 始终 放 在 第 一 位 。 按 照 这 种 
方式 对 原则 进行 排序 ， 可 以 让 团队 在 做 设计 决策 时 明确 哪些 东 
西 应 该 优先 考虑 。 


承认 价值 观 的 冲突 ， 并 给 出 平衡 它们 的 建议 ， 这 是 很 有 用 的 。 
Medium 的 一 个 早期 设计 原则 是 “方向 大 于 选择 。 当 他 们 设计 
编辑 如 的 上 时候， 常常 提 到 这 个 原则 。 他 们 故意 隐 妃 了 各 种 格式 
选项 ， 从 而 引导 人 们 专注 于 写作 〈 见 图 2-1)。 


Rob Smith and Chris Jones used an interesting format in their talk *Is 
E-Commerce an Art or a Science?* One of them pitched on the Design side, 
while the other speaker represented Data. Both ‘opponents’ used compelling 
| CC. 
Bi@O|ITTw 


For example, on the design side Chris argued that intuition, creative 
direction and the ‘gut feel were the qualities that had historically given us 
iconic designs with a strong voice and unique personality. On the other 


hand, data driven design is somewhat akin to design by committee: 


图 2-1 在 Medium 极为 简化 的 编辑 器 里 ， 只 有 少量 几 个 选项 可 供 选 
择 。 这 清晰 地 体现 了 Medium 的 一 个 原则 :“ 方 向 大 于 选择 ” 
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好 的 设计 原则 不 会 试图 涵盖 一 切 。 它 们 有 态度 ， 并 积极 地 鼓 
励 设 计 师 拥有 目 己 的 观点 。Dan Mall 在 Researchine Desiegn 
Systems 一 文中 对 此 进行 了 强调 。 


设计 体系 应 该 有 态度 、 有 观点 ， 能 让 每 一 个 使 用 它 的 人 都 得 到 
创意 上 的 指导 。 这 些 内 容 应 该 反复 革 酌 。 否 则 ， 我 们 直接 把 
Material Designu 拿 来 用 就 完事 儿 了 。” 


Dan Mall 


2.1.4 设计 原则 是 能 产生 共鸣 、 容 易 让 人 记 住 的 


可 以 做 一 个 有 趣 的 试验 : 问 回 你 公司 里 的 人 ， 你 们 的 设计 原则 
有 了 哪些。 如 采 疫 有 人 记得 那些 原则 ， 那 么 它们 多 半 征 值得 改进 
的 。 持 续 使 用 的 原则 才 容 易 让 人 记 住 。 它 们 应 当 在 日 常 对 话 中 
经 第 被 提 及 ， 在 演示 文档 和 设计 批评 中 经 第 出 现 ， 在 一 切 能 
到 它们 的 地 方 显示 出 来 。 当 然 ， 想 要 让 设计 原则 被 用 起 来 ， 它 
们 必须 丰 的 有 用 ， 具 备 前 文 挡 述 的 种 种 特性 。 


这 样 做 ， 也 有 助 于 减少 设计 原则 的 数量 。 人 的 记忆 力 是 有 限 
的 ,一 次 性 记 住 四 件 以 上 的 东西 往往 很 难 。% 设计 原则 的 最 佳 
数量 一 一 如 果 你 想 让 它们 被 用 起 来 的 话 一 一 是 三 到 五 条 。 在 接 
受 本 书 采 访 上 时 ， 当 TED、Atlassian 和 Airbnb 的 团队 成 员 被 回 
及 他 们 的 设计 原则 时 ， 他 们 都 能 脱口 而 出 ， 没 有 所 刻 犹 泡 ， 没 
有 人 表现 出 迟疑 ， 没有 人 和 想 要 去 翻 看 品牌 手册 里 的 原则 内 容 。 
他 们 为 什么 能 把 原则 记得 这 么 牢固 呢 ? 因为 他 们 的 原则 足够 向 
单 、 实 用 、 易 于 让 人 产生 共鸣 一 一 而 且 ， 数 量 不 多 。 


最 为 重要 的 是 ， 团 队 成 员 都 将 它们 作为 日 彰 工 作 的 基础 ， 用 于 制 


(CQ Material Design 是 Google 公司 推出 的 一 套 高 质量 的 设计 体系 。 


译 者 注 
(2) 有 关 人 类 工作 记忆 局 限 性 的 更 多 内 容 ， 请 参阅 Nelson Cowan 撰写 的 文章 
The Magical Mystery Four: How is Working Memory Capacity Limited, and Why?, 
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定 设 计 决 策 。Airbnb 公司 的 四 条 设计 原则 〈 统一 “通用 ”“ 风 
格 化 的 ” “对话 式 的 ") 便 深 深 地 扎根 于 其 设计 过 程 之 中 。 


每 当 设 计 一 个 新 的 组 件 时 ,我 们 都 会 确保 它 完 全 满足 四 条 原则 。 
如 果 我 们 没有 这 一 套 原 则 ， 便 很 难 就 各 种 问题 达成 一 致意 见 。 
我 们 希望 保证 界面 里 的 每 一 小 块 都 符合 这 些 原则 。”% 

Roy Stanfield，Airbnb 首席 交互 设计 师 


Spotify 公司 的 产品 团队 则 为 他 们 的 设计 原则 创造 了 一 个 首 字 母 
缩 略 词 “TUNE”( 这 四 个 字母 分 别 代 表 “ 语 调 ”“ 易 用 ”“ 必 要 
性 ” “情感 化 ”2”) ， 从 而 更 方便 记忆 。 在 产品 评审 和 质 控 环 节 看 
设计 是 否 “in TUNE” 已 经 成 了 Spotify 设计 过 程 的 一 部 分 。 


让 设计 原则 具备 上 述 特 性 需要 大 量 的 时 间 、 精 力 和 团队 合作 ， 
但 这 十 值 得 的 ， 因 为 设计 原则 古 设 计 体系 的 核心 所 在 。 


2.2 ”定义 原则 


用 五 句 话 说 消 苇 你 的 设计 方法 并 不 十 一 件 容 多 的 事 。 每 个 团队 
建立 其 设计 原则 的 方法 都 不 尽 相 同 : 有 有 的 会 召开 儿 轮 人 猎 讨 会 ， 
有 的 可 能 会 征求 CEO 或 创意 总 监 的 意见 。 不 过 ， 无 论 采 取 哪 
种 方式 ， 记 住 下 面 的 提示 总 征 有 帮助 的 。 


2.2.1 从 目的 开始 


设计 原则 必须 苯 循 产品 的 目的 ， 传 递 产品 的 精神 。 如 琳 你 不 知 
道 从 哪里 开始 着 手 建立 设计 原则 ， 束 先 去 看 看 公司 的 价值 观 或 


@ 出 自 2016 年 8 月 对 Airbnb 首席 交互 设计 师 Roy Stanfield 的 采访 。 

@) 这 四 个 词 的 英文 分 别 是 tone (语调 )、usable ( 易 用 )、necessary (必要 性 ) 
和 emotive (情感 化 )。 而 “tune” 一 词 本 意 为 “音调 ”, “in tune” 意 为 “在 
调 上 ”, 后 文 “in TUNE” 为 谐音 , 表示 “符合 TUNE 原则 ”, 简洁 而 巧妙 。 

全 省 六 
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产品 的 愿景 ， 然 后 骨 试 着 弄 消 楚 怎 样 的 设计 原则 有 助 于 实现 这 
些 目标 。 


TED 网 站 的 主要 目的 可 以 用 一 句 话 来 表述 :“ 尽 可 能 广泛 地 传 
播 演 讲 。 因此 ，TED 网 站 的 精神 和 价值 观 便 古 触及 尽 可 能 

的 人 人群， 降低 使 用 门槛 ， 让 启 品 上 共有 很 高 的 兼容 性 和 可 访问 
性 。 这 时 味 着 优化 性 能 和 提升 可 访问 性 比 添加 华而不实 的 功能 
更 重要 ， 清 晰 的 文案 比 大 胆 的 设计 更 重要 。 他 们 设计 原则 中 的 
追求 永恒 ”这 一 条 便 反 映 了 这 些 内 容 。 


2.2.2 ”寻找 共识 


如 采 你 仍 处 在 定义 设计 原则 的 阶段 ， 那 么 一 个 有 效 的 方法 便 征 
让 团队 的 一 些 人 或 所 有 人 (取决 于 团队 规模 ) 各 自 回答 关于 设 
计 原 则 的 问题 。 例 如 ， 在 他 们 眼 里 ,什么 样 的 设计 对 你 们 产品 
来 说 古 好 的 设计 ? 他们 将 如 何 用 既 实 用 又 易于 理解 的 五 句 话 癌 
团队 的 新 成 员 解 释 设 计 原 则 ? 


让 他 们 为 每 一 条 设计 原则 找 一 个 产品 界面 实例 。 


对 比 团队 成 员 各 目的 回答 ， 便 能 看 出 团队 设计 方法 的 统一 程 
度 。 征 人 否 有 很 多 重 登 的 部 分 ? 征 否 有 共识 ? 契 否 有 不 同 的 领域 
归于 相似 的 原则 ? 碍 看 每 个 人 的 回答 是 一 件 有 趣 的 事 ， 特 别 征 
看 团队 新 人 和 团队 老成 员 答案 的 差异 。 当 你 有 了 原则 但 想 进 一 
步 深 化 时 ， 这 些 答案 都 是 宝 吐 的 资源 ， 因 为 它们 有 助 于 找 出 共 
识 、 确 立 优 先 级 。 


2.2.3 面向 正确 的 受众 


如 琳 搞 不 清楚 设计 原则 古 为 谁 写 的 ， 就 一 定 会 写 出 含糊 不 清 的 
原则 。 你 是 为 公司 品牌 手册 写 的 吗 ? 征 为 公司 网 站 写 的 吗 ? 下 
为 职业 网 站 写 的 吗 ? 是 为 潜在 的 合作 伙伴 和 客户 写 的 吗 ? 你 应 
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该 首 驳 为 目 己 和 同事 而 写 ， 尤 其 是 设计 师 、 开 发 人 员 、 内 容 编 
辑 、 埋 销 专家 、 领 域 专 家 ， 也 就 是 与 产品 的 创建 直接 相关 的 人 
员 。 你 们 的 目标 应 该 是 就 “什么 样 的 设计 对 你 们 的 产品 来 说 古 
好 设计 ”这 一 问题 达成 粗略 的 共识 ， 并 提供 如 何 实现 共识 内 容 
的 实 操 指 南 。 


2.2.4 对 原则 进行 测试 和 修订 


随 着 产品 不 断 演进 ， 设 计 原则 也 会 不 断 发 展 。 设 计 原 则 会 塑 僻 
设计 语言 ， 有 反 过 来 设计 语言 也 会 影 啊 设计 原则 。 有 可 能 设计 原 
则 在 一 开始 非常 宽 汉 和 抽象 ， 但 随 着 时 间 的 推移 逐 痢 变 得 清晰 
和 具体 。 也 有 可 能 它们 一 开始 古 明确 的 且 重 点 突出 ， 但 随 着 时 
旧 的 推移 未 浙 变 得 空 这 并 失真 。 为 了 持续 改进 设计 原则 ， 就 需 
要 不 断 地 对 其 进行 测试 、 评 佑 和 改进 。 只 有 在 日 第 工作 中 使 用 
它们 ， 并 有 意识 地 这 样 做 ， 设 计 原 则 才 得 以 持续 改进 。 例 如 ， 
将 设计 原则 作为 设计 批评 的 一 部 分 ， 就 能 不 断 地 测试 它们 是 人 奋 
对 设计 有 和 帮助， 如 来 没 有 帮助 ， 就 继续 杰 代 。 


2.3 ”从 原则 到 模式 


我 作为 设计 师 时 ， 双 到 的 一 个 挑战 便 是 如 何 将 高 层次 的 概念 ， 
如 设计 原则 和 品牌 价值 ， 物 化 为 具体 的 用 户 界面 元 素 。 这 些 概 
念 完 竟 是 如 何 体现 在 我 们 所 创造 的 模式 之 中 的 呢 ? 


这 一 问题 事 关 模式 的 选择 与 运用 。 对 于 Medium 来 说 ， 富 文本 
编辑 右 的 功能 必 不 可 少 ， 但 将 基 做 成 什么 样 、 做 得 多 复杂 ， 有 是 
不 确定 的 。 但 是 ， 在 所 有 的 可 能 性 中 ，Medium 选择 了 最 简单 
的 一 种 ， 因 为 他 们 的 原则 中 有 一 条 是 “方向 大 于 选择 ”。 


对 于 TED 来 说 ， 信 息 的 清晰 比美 观 更 重要 。 试 图 将 每 个 演讲 都 
提炼 成 一 个 短 句 可 能 很 难 ， 所 以 有 时 候 标 题 可 能 很 长 。 对 标题 
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进行 截断 是 很 容易 的 ， 但 对 他 们 来 说 ,演讲 信息 的 优先 级 是 最 
高 的 。 因 此 ， 他 们 没有 选择 相对 容易 的 标题 截断 方案 ， 而 是 确 
保 他 们 的 设计 模式 可 以 容纳 长 的 标题 ( 见 图 2-2)。 


Science didnt 
understand my kids' 
rare disease untill 


decided to study it 


EDMED 2016 - 15:02 . Flimed Nov 2016 


Science didn't understand my kids' rare 
disease until | decided to study it 


© OE 14417% 


图 2-2 TED 网 站 上 的 “ 美 奴 横幅 ”模式 可 以 容纳 长 标题 ， 这 符合 
他 们 的 设计 原则 


从 品牌 的 角度 来 看 ， 这 种 优先 级 的 意识 同样 存在 。TED 团队 一 
直 没 有 选择 将 主页 改 为 一 种 充 福 图 片 的 样式 ， 直 到 他 们 开发 出 
一 种 压缩 工具 ， 可 以 最 大 限度 地 减少 这 些 图 像 对 性 能 的 影响 。 


对 于 Atlassian 公司 的 产品 团队 来 说 ,“ 乐 观 ” 原 则 体现 在 “ 乐 
观 的 界面 ”中 。 例 如 ， 在 JIRAY 中 ， 当 用 户 不 得 不 将 任务 卡片 
从 “进行 中 ”移动 到 “完成 ”时 ,卡片 可 以 立即 移动 ， 即 时 响 
应 ， 哪 怕 这 时 在 后 人 台 有 大 量 的 检查 和 验证 工作 要 做， 并 有 很 多 
出 错 的 可 能 。 他 们 这 样 做 ， 是 为 了 通过 一 种 友好 的 设计 语言 ， 
体现 “瞬间 实用 ”原则 。 这 种 设计 语言 还 体现 在 复制 、 反 馈 信 
息 、 入 职 以 及 网 站 的 很 多 地 方 。 

设计 模式 由 产品 运作 方式 的 核心 理念 所 决定 。 想 想 “ 透 明 、 协 
作 ” 的 精神 是 如 何 融 入 到 Slack 的 开放 频道 中 去 的 ,“ 捕 获 生 活 
中 的 精彩 瞬间 ”的 概念 是 如 何 体现 在 Instagram 的 照片 提要 和 


(JIRA 是 Atlassian 公司 出 品 的 一 款 广 泛 用 于 I 开 界 的 任务 分 配 与 问题 跟踪 
软件 。 一 一 译 者 注 
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交互 方式 里 的 ，Trello 的 卡片 (一 种 源 自 经 典 的 HyperCard 系 
统 的 功能 ) 是 如 何 促 进 特定 类 型 的 工作 流 的 。 


模式 的 选择 与 运用 以 及 对 模式 的 独特 组 合 ， 都 受 产 品 的 目的 、 
精神 和 设计 原则 的 影响 。 可 以 将 设计 原则 视 为 创建 模式 并 以 具 
有 内 在 意义 的 方式 组 合 它们 的 语法 规则 。 

同样 ， 随 着 品牌 和 功能 性 模式 的 发 展 和 人 完善， 它们 反 过 来 也 影 
啊 了 设计 原则 。 原 则 和 模式 始终 不 断 地 相互 影响 ， 相 互 完 善 。 


在 第 3 革 和 第 4 革 ， 我 们 将 以 实际 的 产品 为 例 ， 更 为 详细 地 探 
订 设 计 模 式 。 我 们 将 讨论 设计 模式 是 如 何 出 现 的 ， 以 及 它们 古 
如 何 受 产品 的 目的 和 精神 、 用 户 行为 、 品 牌 、 业 务 需 求 以 及 其 
他 各 种 因素 影响 的 。 
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功能 性 模式 


本 章 将 讨论 功能 性 模式 的 角色 ， 以 及 为 什么 要 在 设计 过 程 的 开 
始 阶段 就 定义 好 它们 。 


功能 性 模式 是 界面 中 有 形 的 构件 。 它 们 的 目的 是 让 用 户 能 够 完 
成 菜 种 行为 ， 或 者 油 励 用 户 完 成 茶 种 行为 。 


在 “十 分 钟 误 饪 ”网 站 中 ， 用 户 的 行为 包括 在 规定 时 间 内 挑选 
食材 、 选 择 沫 谱 并 完成 接 下 来 的 步 驼 。 我 们 设计 的 功能 性 模式 
就 是 由 这 些 行为 决定 的 。 功 能 性 模式 又 称 作 模块 , ”它们 在 很 大 
程度 上 是 由 产品 所 属 的 领域 决定 的 。 比 如 ， 有 总 饪 应 用 一 定 与 财 
务 软件 大 不 相同 ， 前 者 处 理 的 模块 是 食谱 卡片 ， 后 者 则 是 任务 
条 、 数 据 字 段 、 网 格 和 图 表 。 


功能 性 模式 可 以 很 测 单 ， 也 可 以 组 合成 更 复杂 的 模式 。 食 谱 卡 
片 十 由 食谱 标题 、 食 物 照 片 、 食 材 图 标 和 操作 按钮 构成 的 。 卡 
片 里 的 每 一 个 模块 都 有 其 目 身 的 目的 : 标题 告诉 我 们 这 顿 餐 食 
征 什么 ， 图 片 提供 了 了 最 终 效 朱 的 预 岳 ， 而 食材 图 标 则 让 扫 视 卡 
片 变 得 更 加 容 多 。 


总 的 来 看 ， 这 些 模块 都 有 一 个 共通 的 目的 : 豆 励 人 们 受 饪 食谱 
上 展示 的 食物 。 


随 着 产品 的 发 展 ， 模 式 也 在 不 断 发 展 。 例 如 ， 我 们 可 能 会 让 用 
户 对 食谱 进行 打分 ， 那 么 分 数 的 显示 就 将 成 为 食谱 卡片 的 一 部 


(D 在 我 看 来 ， 功 能 性 模式 这 个 词 更 加 通用 ， 并 带 有 柏拉图 式 的 理想 主义 色 
彩 ， 而 模块 是 功能 性 模式 的 表现 形式 ， 不 同 界面 的 模块 各 不 相同 。 
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分 。 又 如 ， 我 们 可 能 认为 卡片 的 布局 需要 改进 、 食 材 的 图 标 需 
要 更 加 明确 或 者 需要 设计 一 种 紧凑 版 的 卡片 样式 。 我 们 不 停 地 
对 模式 进行 测试 和 友 代 ， 和 而 于 它 们 更 好 地 实现 各 目的 目的 ， 或 
者 说 更 有 效 地 激励 用 户 行为 。 


在 设计 过 程 的 开始 阶段 就 曾 明 模式 的 目的 ， 能 避免 在 I 
i 一 开始 ， 这 样 做 似乎 并 不 值得 

， 早 期 的 产品 可 能 变化 很 快 ， 难 以 顾及 界面 的 每 个 部 分 。 但 
是 ， 核 心 的 功能 性 模式 真 的 会 有 很 大 变化 吗 ? 下 面 ， 我 们 以 
FutureLearn 为 例 ， 看 看 它 的 界面 在 第 一 版 设计 之 后 的 三 年 里 面 
是 如 何 演变 的 。 


FutureLearn 目 2013 年 由 英国 开放 大 学 创立 以 来 ， 其 愿景 始终 
是 “通过 讲 故 事 、 激 发 对 话 和 庆祝 进步 来 激励 每 个 人 学 习 ”。 
为 了 实现 这 一 点 ， 我 们 至 少 要 让 人 们 能 够 发 现 并 加 入 在 线 课 
程 ， 进 而 油 励 他 们 进步 ， 并 让 他 们 在 学 习 中 感到 兴奋 、 有 成 就 
感 。 这 个 愿景 打造 了 FutureLearn 最 急 的 功能 性 模式 。 


FutureLearn 的 课程 按 单 元 排列 ， 并 形成 了 一 个 线性 的 流程 ， 
一 一 相连 。 在 界面 上 ， 这 种 结构 就 转化 成 了 周 视图 。 每 个 星期 
分 为 一 些 活动 ， 每 个 活动 分 为 儿 个 步 又 。 课 程 进度 模块 ( 见 图 
3-1) 是 一 个 核心 的 功能 性 模式 : 它 让 学 员 能 训 览 课程 内 容 、 显 
示 他 们 的 进度 以 及 当前 上 到 哪 一 课 了 。 


WEEK WEEK 


图 3-1 FutureLearn 的 课程 进度 模块 
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在 三 年 的 时 间 里 ， 这 些 模式 也 发 生 了 一 些 变化 。 它 们 的 风格 ， 甚 
dad 它们 的 目的 基本 保持 不 
， 因 为 这 与 FutureLearn 如 何 运 转 的 核心 理念 有 关 ( 见 图 3-2)。 
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心 模块 的 目的 始终 没 


类 似 地 ，FutureLearn 的 讨论 区 模块 也 随 着 时 间 的 推移 而 有 所 变 
化 (由 于 参与 的 人 数 变 多 了 ) : 讨论 主题 的 布局 、 交 互 方式 以 
及 过 滤 功 能 都 有 变化 ， 但 它们 的 核心 目 钱 
话 ， 让 他 们 相互 学 > 基本 没有 变化 〈 见 图 3-3)。 
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图 3-3 ”讨论 区 页 面 在 设计 完成 后 经 历 了 几 次 迭代 ， 但 核心 模块 的 
目的 没有 变 过 


用 于 展示 课程 详细 信息 的 核心 模块 在 三 年 里 也 变化 了 ， 让 用 户 
在 问 下 党 动 页 面 之 前 能 看 到 更 多 的 课程 列表 ( 见 图 3-4)。 与 上 
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功能 性 模式 


文 捉 到 的 类 似 ， 这 一 模 却 的 目的 一 一 让 人 们 能 发 现 他 们 感 兴 趣 
的 课程 并 加 入 进去 一 一 并 未 改变 。 
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图 3-4 过 去 几 年 里 课程 列表 变化 了 ， 让 用 户 能 看 到 更 多 的 课程 列表 


由 于 时 间 限 制 和 优先 级 的 问题 ， 很 多 核心 的 功能 性 模式 在 一 开 
始 都 没有 定义 好 ， 这 在 项 目 早期 经 稼 发 生 。 随 着 FutureLearn 界 
面 和 功能 的 发 展 ， 产 生 了 重复 的 模式 。 于 是 我 们 有 了 多 个 课程 
进度 模块 、 多 种 评论 模块 ， 以 及 一 些 不 同 的 课程 区 域 和 课程 卡 
片 。 这 或 许 难以 完全 避免 ， 但 有 疫 有 可 能 部 分 避免 呢 ? 


如 和 朱 不 在 团队 中 定义 并 共享 模式 ， 就 会 为 相似 的 目的 反复 构建 
新 的 模式 ， 于 是 便 有 了 男 一 个 促销 模块 、 田 一 个 新 闻 动 态 、 田 
一 组 分 享 和 链接、 为 一 个 下 拉 列 表 …… 在 你 没有 意识 到 问题 之 
前 ， 就 已 经 得 到 了 30 种 不 同 的 产品 展示 和 弹出 末 单 。 


模式 是 我 们 试 着 通过 界面 ， 让 用 户 能 够 完成 某 种 行为 或 激励 用 
户 完成 某 种 行为 的 物理 体现 。 它 们 的 执行 、 内 容 、 交 互 方式 和 
显示 效果 可 能 会 变 〈 实 际 上 模式 甚至 不 必 是 可 视 的 一 一 它们 可 
以 通过 声音 读 出 或 者 其 他 方式 体现 出 来 )， 但 它们 所 鼓励 的 核 
心 行为 保持 相对 稳定 ， 因 为 这 是 植 根 于 产品 目的 及 其 工作 原理 
的 。 牢 记 关 键 模 式 的 目的 ， 有 助 于 了 解 设计 体系 的 运转 方式 ， 
防止 设计 体系 在 发 展 过 程 中 碎片 化 。 
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3.2 ”定义 功能 性 模式 


在 设计 过 程 的 早期 定义 模式 不 需要 花费 很 多 时 间 。 有 些 技 术 
可 以 轻松 地 集成 到 设计 过 程 中 。 下 面 便 是 其 中 一 些 非常 有 用 的 
技术 。 


3.2.1 创建 模式 映射 


为 了 确定 客户 的 需求 、 目 标 和 动机 ， 你 可 能 做 了 客户 体验 映 
射 、JTBDY 或 其 他 一 些 类 似 的 围绕 客户 旅程 展开 的 实践 。 这 些 
做 法 的 产 出 物 则 成 了 早期 设计 探索 和 原型 设计 的 基础 。 基 于 这 
一 点 ， 我 们 很 清楚 我 们 想 鼓 励 用 户 完 成 的 行为 : 了解 课程 、 加 
入 课程 、 参 与 讨论 。 


但 我 们 一 旦 专注 于 界面 ， 有 时 就 会 陷入 细 证 之 中 。 我 们 花费 大 
量 时 间 设 计 令 人 印象 深刻 的 页 眉 ， 却 饼 了 它 的 作用 ， 扎 了 它 在 
用 户 轨迹 的 不 同 阶 段 是 如 何 影 响 用 户 的 。 换 句 话说 ， 我 们 没有 
将 用 户 行 为 与 鼓励 或 支持 这 些 行为 的 确切 模式 关联 起 来 。 


要 了 解 你 的 模式 如 何 适 应 更 大 的 图 景 ， 请 试 着 将 一 些 核心 模块 
映射 到 用 户 轨 迹 的 各 个 部 分 。 


想 想 每 个 部 分 的 作用 及 其 所 鼓励 的 行为 。 此 时 无 须 操心 单个 图 
标 或 按钮 ， 而 是 要 放眼 全 局 : 了 解 系统 的 各 个 部 分 以 及 它们 是 
如 何 相 互 协作 的 。 对 FutureLearn 来 说 ， 就 是 关注 三 个 主要 的 方 
面 : 发 现 内 容 、 学 习 课 程 、 实 现 目标 ( 见 图 3-5)。 


Q) JTBD (“Job to be done" ， 即 “ 待 完 成 的 工作 ”) 是 一 项 练习 ， 它 帮助 你 
关注 使 用 产品 或 接受 服务 背后 的 六 在 动机 ， 而 不 是 产品 本 里。 例如 ， 尽 
管 客 户 说 他 们 买 一 台 割 草 机 是 为 了 “ 割 草 " ， 他 们 更 根本 性 的 目的 可 能 
是 “始终 保持 昔 低 矮 ， 看 着 漂亮 ， 这 可 能 意味 着 割 单机 并 非 首 选 。 


功能 性 模式 
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图 3-5 ”FutureLeamn 的 一 些 功 能 性 模式 被 映射 到 用 户 轨迹 的 三 个 关 
键 阶 段 


我 在 脑 中 记 着 这 张 映 射 图 ， 这 有 助 于 我 将 模式 理解 为 具有 相同 
目的 的 多 个 系列 ， 而 非 单 个 页 面 。 例 如 ， 设 计 “发现” 模块 的 
时 候 我 会 将 其 视 作 一 个 整体 ， 而 不 是 仅仅 当 作 谍 程 列表 页 面 来 
设计 。 


哪些 行为 是 在 用 户 轨迹 的 当前 阶段 需要 去 鼓励 的 ? 哪些 模式 可 
以 文 持 这 些 行 为 ? 网 站 上 还 有 哪些 地 方 有 这 些 模式 ， 以 及 它们 在 
那些 地 方 是 如 何 运转 的 ? 一 个 新 的 模式 如 何 服务 于 整个 设计 体 
系 ? 思考 上 述 这 些 问 题 ， 征 系统 性 地 开展 设计 工作 的 一 部 分 。 


3.2.2 ”打造 珊 面 清单 


Brad Frost 提出 的 界面 清单 流程 已 经 成 为 一 种 流行 的 界面 模块 
化 方法 ( 见 图 3-6)。 这 种 方法 的 思想 很 人 简单。 首先 ， 你 可 以 
把 界面 打印 到 纸 上 ， 或 者 将 它们 放 入 Keynote 或 PowerPoint。” 


(GD Keynote 和 PowerPoint 分 别 是 Apple 公司 和 Microsoft 公司 推出 的 演示 
文稿 制作 工具 。 一 一 译 者 注 
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然后 ， 你 便 可 以 将 各 种 不 同 的 组 件 剪 下 来 ， 或 者 在 Keynote 或 


PowerPoint 中 通过 剪 切 、 粘 贴 的 方式 将 不 同 的 组 件 区 分 开 来 。 


My Lists 
Fines/Fees ($0.00) 


Messages > 
auniOAD MORE APPLY 
( ) (Vw ) a (9 Picks for Winter 2015 
Clear Book Bag | KHOLMATOVA,ALLA | Logout Temove 
View Book Bag VIEW IMAGES 
a umi RN! J VN 
seien = Request the book 
Ce ) 
MACE MOLD 


图 3-6 一 份 界面 清单 (这 里 仅 展示 了 一 部 分 交互 元 素 ) 


最 终 ， 这 些 组 件 形成 了 不 同 的 分 类 一 一 导航 、 表 单 、 标 签 页 、 
按钮 、 列 表 等 。 通 过 这 一 过 程 ， 你 能 看 出 哪些 模式 契 重 复 的 ， 
并 发 现 需要 留意 的 问题 区 域 。 当 你 发 现 你 有 儿 十 个 页 眉 或 弹出 
菜单 ， 便 会 开始 思考 如 何 构建 规范 。 


界面 清单 不 一 定 包含 所 有 的 内 容 (尽管 你 所 做 的 第 一 个 清单 应 
当 是 全 面 的 )。 它 可 以 一 次 仅 关 注 一 组 模式 ， 如 促销 模块 、 页 
履 或 者 所 有 产品 展示 模块 ， 也 可 以 专门 针对 排版 、 配 色 或 动画 
等 制作 界面 和 请 单 。 


为 了 你 持 了 最 佳 效 末 ， 应 该 定期 维护 界面 清单 。 即 便 你 的 团队 已 
经 维护 了 一 个 模式 库 ， 新 的 模式 也 会 出 现 ， 需 要 放 入 整个 设计 
体系 。 如 采 你 养 成 了 每 隔 几 个 月 就 维护 一 次 界面 清单 的 习惯 ， 
每 次 做 这 项 工作 就 只 需要 伦 几 个 小 时 而 已 。 而 且 ， 每 次 你 这 样 
做 的 时 候 ， 都 会 让 你 更 好 地 理解 你 的 设计 体系 并 改进 它 。~ 


(D 在 第 7 章 和 第 8 半 中 ， 我 们 将 深入 探讨 界面 清单 流程 ， 从 设计 体系 的 目 
的 开始 ， 直 到 最 小 的 模式 (如 图 标 和 配色 )。 
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3.2.3 ”将 模式 视 为 操作 


要 理解 一 个 模 坏 的 目的 ， 需 要 关注 它 的 作用 是 什么 ， 而 不 征 你 
认为 它 是 什么 。 换 句 话 说 ， 要 试 着 找到 最 能 接 述 其 行为 的 操 
作 。 用 动词 而 非 名 词 来 朱 述 模式 ， 有 助 于 扩展 模式 的 实在 用 
例 ， 并 更 准确 地 定义 其 用 途 。 


设想 你 有 一 个 简单 的 推广 在 线 课 程 的 模块 〈 见 图 3-7)。 当 你 试 
着 抽 述 它 古 什么 的 时 候 ， 可 以 将 其 称 作 “ 图 像 标 题 ” 或 “ 诬 程 
横幅 。 


EE ONLINE' COURSE 


Begin Robotics 


Explore the history, anatomy and intelligence of robots with this free 
online course. Test drive robots using exciting simulations 


Go to course — started 22 Feb 


3-7 ”FutureLearn 上 推广 在 线 课 程 的 UI 组 件 


但 是 用 这 种 方式 折 述 模式 ， 就 过 于 局 限于 其 呈现 和 内 容 了 ， 取 
终 容易 将 模式 的 使 用 玫 围 限制 在 特定 的 上 下 文中 。 相 反 ， 如 末 
根据 操作 一 一 从 用 户 角 度 及 你 自身 的 角度 一 一 来 定义 模式 ， 便 
可 以 发 现 它 的 目的 :“ 推 广 课程 ”( 对 你 而 言 ) /“ 发 现 课程 ” 
(对 用 户 而 言 ),，“ 从 课程 中 受到 启迪 ”( 对 用 户 而 言 ) /“ 鼓 励 人 
们 加 入 课程 ”( 对 你 而 言 )。 


通过 关注 操作 ， 可 以 将 模式 与 行为 联系 起 来 ， 并 兼容 各 种 不 同 
的 用 例 。 上 面 的 这 个 模式 除了 推广 诛 程 还 能 推广 什么 ?在线 讨 
论 区 ? 还 是 一 场 新 的 活动 ? 你 给 它 起 的 名 字 也 能 反映 这 一 点 。 
在 这 个 例子 中 ， 我 们 最 终 将 模块 命名 为 “广告 牌 ”(Billboard )， 
以 反映 其 广 重 操作 的 推广 功能 。 
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3.2.4 ”描绘 模式 的 内 容 结 构 


要 对 模 却 的 工作 方式 达到 共识 ， 请 朱 绘 其 结构 : 让 模块 能 够 有 
效 运行 的 核心 内 容 。 


无 论 古 处 理 新 模块 还 古 重 构 现 有 模块 ， 设计 师 、 开 发 人 员 和 内 
容 和 略 师 帮 可 以 一 起 来 完成 这 件 事 。 甫 和 完 ， 列 出 让 模块 能 够 有 
效 运 行 的 核心 内 容 元 素 。 例 如 ， 你 们 可 能 都 认可 界面 中 像 “ 广 
告 牌 ” 这 样 的 推广 模块 需要 以 下 内 容 : 

D 标题 

口 强烈 的 行动 召唤 

口 吸引 眼球 的 背景 (无 论 使 用 纯色 还 是 图 像 ) 


接 下 来 ， 试 着 确定 元 素 的 层次 结构 ， 并 决定 如 何 对 它们 进行 分 
组 。 例 如 ， 图 片 是 内 容 的 一 部 分 吗 ? 标 签 页 十 一 定 要 有 的 吗 ? 
在 这 样 做 的 同时 ， 可 以 画 一 些 草图 ， 从 而 让 结构 变 得 可 视 化 。 


为 了 让 你 了 解 它 可 能 的 样子 ， 3-8 是 FutureLearn 上 课程 列表 
项 模块 的 内 容 结 构 的 例子 。 
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3-8 FutureLearn 上 课程 列表 项 的 内 容 结构 的 例子 


功能 性 模式 


此 时 你 可 能 会 想 :“ 这 不 就 是 一 个 草图 或 线 框图 咏 。 这 种 事 我 
一 直 都 在 做 啊 。” 但 实际 上 这 有 点 不 一 样 。 这 是 专注 于 模块 内 
容 结 构 、 元 素 层 次 结构 和 分 组 的 草图 。 


一 旦 对 模式 的 结构 有 了 共识 ， 束 很 容易 确 你 模块 的 设计 方式 反 
映 在 标记 中 。 设 计 师 负 和 贡 视 觉 上 的 探索 ， 而 开发 人 员 则 开始 整 
理 原型 (或 者 两 者 都 可 以 做 原型 ,这 取决 于 具体 的 工作 方式 )。 
设计 师 知 道 在 模式 的 不 同 阶段 ， 他 们 可 以 将 视觉 设计 推进 到 什 
么 程度 。 开 发 人 员 了 解 设计 选择 的 原因 ， 并 且 不 会 让 意料 之 外 
的 设计 被 扔 到 墙 上 。 


还 有 一 个 例子 。 过 去 ， 在 FutureLearn 网 站 上 曾 有 四 个 不 同 版 
本 的 社交 消息 流 模块 分 布 在 不 同 的 地 方 ， 包 含 两 个 版 本 的 “ 评 
论 ”、 一 个 “回复 ”和 一 个 “通知 ”( 见 图 3-9)。 
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3-9 ”FutureLearn 上 四 种 不 同 版 本 的 社交 消 奶 流 模 块 


虽然 这 四 个 模块 乍 看 之 下 很 相似 ， 但 它们 没有 统一 的 样式 。 
也 就 是 说 ， 如 末 修 改 其 中 的 一 个 ， 其 他 的 三 个 不 会 同步 改变 ， 
从 而 造成 间 跑 、 排 版 等 方面 的 视觉 差异 。 对 这 四 个 模块 进行 
拆 解 ， 绘 制 它 们 的 结构 ( 见 图 3-10) ， 能 让 我 们 看 出 它们 是 否 
可 以 统一 成 一 种 模式 ， 是 否 可 以 设计 出 一 种 兼容 四 种 用 例 的 
模式 。” 


QD 在 第 8 章 中 ， 我 们 将 更 加 详细 地 讨论 什么 时 候 需要 统一 模式 ， 什 么 时 候 
需要 拆 分 模式 ， 什 么 时 候 需 要 创建 变 体 。 
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图 3-10 FutureLearmnm 上 “信息 流 项 目 ” 模 块 的 内 容 结 构 


从 这 些 例子 可 以 看 出 ， 内 容 结构 与 模式 的 目的 古 窗 切 相关 的 。 
了 解 模 块 的 结构 有 助 于 理解 模块 的 工作 原理 。 


3.2.5” 按 某 个 维度 排列 模式 


可 以 试 着 将 相似 的 模式 按照 杀 个 维度 排 在 一 起 。 例 如 ， 你 的 系 
统 中 可 能 有 一 些 推广 性 的 模式 ， 其 强度 各 不 相同 。 与 第 1 章 提 
到 的 视觉 音量 表 类 似 ， 推 广 模块 也 可 以 相互 比较 ( 见 图 3-11)。 


Scream Cheer Whisper 


图 3-11 推广 模块 可 以 排列 在 假想 的 视觉 音量 表 上 
在 其 个 维度 上 排列 模式 有 助 于 确保 对 它们 的 使 用 是 恰当 的 ， 不 


会 在 整个 系统 中 争夺 注意 力 。 这 样 做 还 有 助 于 防止 不 必要 地 重 
复 创建 模块 ， 因 为 你 可 以 看 到 何 时 已 经 有 了 “ 首 量 ”的 模块 。 


另 一 种 思考 方式 是 想象 你 的 界面 不 是 可 视 的 ， 而 征 可 以 通过 疡 
首 读 出 来 的 。 这 个 声音 什么 时 候 和 需要 增 大 音量 并 改变 语调 ? 忆 


图 3-12 用 于 展示 产品 特性 的 模块 的 例子 


我 们 可 以 将 其 目的 定义 为 “通过 一 些 额 外 有 的、 方便 扫 手 的 信 
息 ， 文 撑 主 要 的 信息 ”。 这 里 的 “一 些 信息 ”可 以 是 关键 的 特 
性 、 仙 得 的 建议 或 便捷 的 操作 步骤 。 我 们 可 以 为 符合 这 一 假设 
的 内 容 《简洁 、 可 扫描 、 补 充 性 ， 而 非 页 面 上 的 主要 内 容 ) 构 
建 模 式 ， 再 对 其 进行 检测 。 


如 末 内 容 总 是 不 能 匹配 此 模式 ， 通 常 是 由 以 下 三 个 原因 中 的 一 
个 或 多 个 引起 的 。 


GD 屏幕 阅读 器 (screen reader) 是 用 于 将 界面 上 的 文字 等 视觉 内 容 转 化 为 
语音 的 软件 ， 从 而 帮助 视 障 人 士 和 阅读 障碍 者 获取 内 容 。 一 一 译 者 注 
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芳 如 何 通过 模块 内 元 素 间 的 相互 关系 和 层次 结构 ， 完 成 对 音量 

和 话 调 的 视 沉 表达。 当然， 这 样 做 还 有 助 于 提升 对 屏 攻 陪读 

器 ”的 可 访问 性 。 

3.2.6 ”将 内 容 视 为 假设 

有 这 样 一 个 悖 论 : 我 们 希望 设计 是 内 容 优先 的 ， 同 时 又 希望 建 

立足 以 适应 任何 类 型 内 容 的 模块 。 为 了 解决 这 一 问题 ， 一 种 方 

法 古 ， 不 一 定 从 内 容 开 始 ， 而 是 从 目的 开始 。 这 样 ， 我 们 便 不 

会 将 内 容 视 为 已 知 的 资源 ， 而 是 视 为 一 种 假设 (hypothesis)。 

这 样 做 能 检测 出 我 们 是 否 已 经 定义 好 了 模块 的 目的 ， 以 及 我 们 

的 设计 古 否 符合 这 一 目的 。 

假设 我 们 有 一 个 用 于 展示 产品 特性 的 模块 ( 见 图 3-12)。 

- 二 全 

Learn anything Learn together Learn with experts 
Choose from hundreds of free online Join an online course and meet other Meet educators from top universities and 
courses: from Language & Culture to learners from around the world. Learning cultural institutions, who'll share their 
Business & Management; Science & is as easy and natural as chatting with a experience through videos, articles, 
Technology to Health & Psychology. group of friends. quizzes and discussions. 

View all courses See how it works Meet our partners 
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D 我 们 疫 有 正确 地 定义 模 却 的 目的 。 请 试 痢 重新 去 理解 模式 征 
用 于 支持 哪些 行为 的 。 

口 我 们 设计 模式 的 方式 并 不 是 最 能 反映 其 目的 的 方式 。 请 为 此 
模 却 答 试 其 他 的 设计 。 

D 我 们 试图 将 内 容 强 行 放 入 不 合适 它们 的 模式 。 请 考虑 修改 内 
容 ， 或 尝试 其 他 模式 。 


如 霖 我 们 的 工作 从 一 开始 就 没有 旁 虑 目的 和 结构 ， 最 终 我 们 得 
到 的 模块 就 会 与 内 容 联 系 太 紧 密 。 我 们 在 FutureLearn 中 有 这 样 
一 个 例子 ， 一些 介 绍 性 的 内 容 将 重要 的 标签 页 挤 到 了 可 见 区 域 
的 下 方 ( 见 图 3-13)。 


Get extra benefits, upgrade 
this course. For £59 you'll get: 


A CERTIFICATE OF ACHIEVEMENT 


Upgrading means youl receive a Certificate of Achievement 


~ Prove your success when applying for jobs or courses 


w Celebrate your hard work 


w Display on your Linkedin or CY 


To receive a Certificate of Achievement you need to mark 90% 
of the steps on the course as complete, and score over 70% on 
ony course tests, 


UNLIMITED ACCESS ACCESS TO TESTS 


图 3-13 ”一 个 脆弱 模块 的 例子 ， 它 的 内 容 过 于 具体 


标签 页 是 需要 保持 可 见 的 。 为 了 解决 这 个 问题 ， 我 们 想 过 减 小 
标题 的 字号 ， 从 而 让 标签 页 得 以 稍微 往 上 移动 一 些 。 但 如 采 我 
们 这 样 做 了 ， 我 们 得 到 的 便 是 一 个 不 够 稳健 的 模块 。 


如 采 标 题 变 得 长 ， 或 者 我 们 还 需要 添加 更 多 的 内 容 ， 我 们 就 会 
再 次 过 到 同样 的 问题 。 但 如 采 我 们 从 一 开始 就 考虑 到 模块 的 目 
的 和 结构 ， 标 签 页 便 很 可 能 放 在 顶部 ， 因 为 它们 是 这 个 设计 里 
面 的 重要 元 素 。 


功能 性 模式 


以 上 这 些 仅仅 是 你 在 界面 中 定义 功能 性 模式 时 可 以 尝试 去 用 的 
一 些 工 具 和 技术 。 但 取 重 要 的 是 ， 你 需要 了 解 模式 是 如 何 与 它 
们 最 初 所 设 定 的 行为 关联 在 一 起 的 ， 也 就 是 它们 的 目的 。 


目的 决定 了 其 他 的 一 切 : 模式 的 结构 、 内 容 及 呈现 。 了 解 模 式 
的 目的 (也 即 了 解 需 要 达成 或 激励 的 行为 )， 可 以 帮助 我 们 设 
计 和 构建 更 加 稳健 的 模块 。 


这 样 做 可 以 帮助 我 们 知道 一 个 模式 在 应 用 之 前 有 多 少 可 以 修 
改 。 这 样 做 为 整个 团队 提供 了 一 个 共同 的 参考 点 ， 并 将 模 陈 与 
原始 的 设计 意图 联系 在 一 起 ， 从 而 减少 了 重复 的 情形 。 牢 记 目 
的 还 会 让 检测 模式 的 有 效 性 变 得 更 加 容易 。 


如 果 说 功能 性 模式 是 界面 中 的 组 件 ， 那 么 感知 性 模式 则 更 像 古 
样式 一 一 描述 组 件 是 什么 类 型 的 ， 给 人 的 感受 是 什么 样 的 。 下 
和 耐 ， 我 们 将 详细 探讨 感知 性 模式 .。 
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第 4 章 


感 和 性 模式 


本 章 将 讨论 感知 性 模式 如 何 工 作 ， 以 及 它们 在 设计 体系 中 的 
角色 。 


设想 我 们 两 个 人 各 有 一 套房 子 ， 且 这 两 套房 子 都 有 以 下 这 些 家 
具 : 一 张 昌 子 、 几 把 棒子、 一 张 床 和 一 个 衣柜 。 不 过 ， 虽 然 都 
有 这 些 家 具 ， 但 这 两 套房 子 给 人 的 感 贫 截然 不 同 : 可 能 古 因 为 
家 有 具 的 样式 、 材 料 、 颜 色 、 纹 理 不 同 ， 或 者 是 床单 的 布料 、 装 
饰品 的 样式 、 房 间 的 布局 和 灯光 ， 黄 至 是 房间 里 播放 的 音乐 不 
同 。 上 述 这 些 属 性 便 称 作 感 知性 模式 。 正 古 因 为 它们 ， 可 能 你 
的 房子 就 像 古 一 个 波 西 米 亚 风格 的 小 色 ， 而 我 的 房子 束 像 古 一 


个 仓库 。9 


数字 产品 感知 性 模式 的 例子 包括 语气 、 排 版 、 配 色 、 布 局 、 插 
图 与 图 标 样式 、 形 状 与 纹理 、 间 距 、 意 象 、 交 互 或 动画 ， 以 及 
这 些 要 素 在 界面 中 的 组 合 和 使 用 的 具体 方式 。 


感知 性 模式 总 是 有 的 ， 哪 怕 没 有 刻意 去 设计 。 即 便 是 纯 工具 应 
用 ， 也 需要 具有 美感 。 


有 了 时， 人 们 将 这 样 的 特性 视 为 产品 的 样式 ， 或 称 作 反 肤 ， 也 束 
是 最 外 面 的 一 层 。 但 要 想 取 得 成 效 ， 它 们 必须 不 仅 存 在 于 表 
和 面 ， 还 必须 存在 于 品牌 的 核心 ， 并 随 着 产品 的 发 展 而 发 展 。 只 
有 这 样 ， 感 知性 模式 才 会 成 为 让 产品 脱 视 而 出 的 强大 力量 。 


QD 在 我 去 一 些 地 方 的 时 候 , 这 种 思维 方式 会 让 我 的 整个 经 历 变 得 截然 不 同 。 
无 论 是 在 咖啡 馆 ， 在 新 城市 ， 还 是 在 野餐 的 地 点 ， 我 总 是 喜欢 思考 一 个 
地 方 给 人 的 感受 ， 并 试 着 寻找 能 营造 这 种 氛围 的 模式 。 


感知 性 模式 


4.1 感知 性 模式 的 作用 


4.1.1 感知 性 模式 有 助 于 传递 品牌 形象 


同一 领域 的 产品 ， 哪 怕 上 有 具 有 相似 的 模块 ， 它 们 给 人 的 感 洁 也 是 
不 全 作 的 。 a 我 尝试 了 几 十 个 功能 相似 的 文字 处 
理 软 件 ， 其 中 只 有 少数 几 个 (包括 我 现在 正在 用 的 ) 能 提供 那 
ee ge 


我 在 用 的 这 个 软件 ， 设 计 请 碍 明快 ， 让 人 免 于 打扰 ， 把 焦点 放 
在 重要 的 事情 上 ， 例 如 文档 大 纲 的 显示 方式 ， 还 有 当 我 接近 
“写作 目标 ”时 逐渐 变 绿 的 小 圆圈 。 这 种 环境 是 由 一 些 特定 的 
模式 组 合 起 来 的 ， 尽 管 乍 看 之 下 不 容易 确定 有 哪些 模式 。 


我 们 来 看 男 一 个 例子 : Spotify。 我 感 饥 它 是 温暖 的 、 私 人 的 。 
在 这 个 拥有 超过 1 人 月 度 活跃 用 户 的 数字 音乐 服务 的 界面 中 ， 
创造 杀 密 氛围 的 模式 完 竟 是 什么 ?除了 功能 以 外 ， 这 主要 归功 
于 图 像样 式 、 颜 色 搭配 (尤其 是 绿色 和 黑色 的 比例 )、 交 互 中 
微妙 而 平静 的 感觉 ， 以 及 排版 上 的 选择 ( 见 图 4-1)。” 


与 之 相反 ，Smashing 杂志 的 个 性 是 俏皮 、 富 含 创 意 、 开 放 热 
湖 、 稍 微 有 些 不 同 导 常 。 而 这 一 个 性 是 通过 另 一 套 完 全 不 同 的 
模式 传达 出 来 的 一 一 从 大 胆 的 配色 和 插图 ， 到 界面 中 一 些 细节 
的 呈现 ， 例 如 让 一 些 界面 元 素 倾 斜 一 定 角度 ( 见 图 4-2)。 


Q) 想 知 道 我 在 用 的 是 哪个 软件 吗 ? 答案 是 Ulysses。 
@ Spotify 的 愿景 “每 时 每 刻 都 有 对 的 音乐 ”及 设计 原则 “情感 化 ”与 这 
些 感知 性 模式 所 创造 的 感觉 都 是 吻合 的 。 
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Spotify 的 亲密 氛围 是 一 系列 感知 性 模式 (如 微妙 的 交互 、 
柔和 的 意象 和 着 重 呈 现 的 颜色 ) 结合 在 一 起 的 结果 
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新 版 Smashing 厅 条- 忆 志 网 久 站 的 个 性 由 一 系 列 感知 性 模式 传递 
出 来 一 一 从 排版 上 的 处 理 ， 到 倾斜 的 图 像 和 图 标 


感知 性 模式 通过 界面 传递 品牌 ， 并 让 品牌 被 人 记 住 。 看 下 面 的 
图 片 〈 见 图 4-3) ， 你 能 认 出 它们 代表 哪些 产品 吗 ? 


感知 性 模式 
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Browse Directory Beyond the wisdom 
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All of the great Disney works 


Etiam at risus et justo dignissim congue, 


回 四 回 


跨国，O 
图 4-3 ”你 能 认 出 这 两 张 图 分 别 代表 什么 产品 吗 


这 两 张 图 里 面 并 没有 太 多 的 信息 ， 你 只 能 看 到 排版 的 样式 、 一 些 
图 形 和 颜色 ， 以 及 一 些 图 标 。 然 而 那些 视觉 上 的 线索 极 具 辨 识 
度 ， 所 以 你 仍然 很 有 可 能 看 出 它们 分 别 属于 什么 产品 ( 妈 Slack 
和 TED)。 这 些 视觉 元 素 通过 有 意识 地 反复 使 用 ， 便 形成 了 模 
式 ， 这 就 是 为 什么 我 们 可 以 在 没有 上 下 文 的 情况 下 认 出 它们 。 


我 们 的 感知 不 仅 受到 一 些 构件 (如 调 色 板 、 字 体 ) 的 影响 ， 还 
受 它们 之 间 关 系 的 影响 。 仅 仅 使 用 模块 中 的 标题 和 颜色 是 不 够 
的 。 我 们 还 应 该 意识 到 ， 走 哪些 独特 的 比例 和 组 合 使 产品 具有 
某 种 感觉 的 。 颜 色 之 间 有 关系 吗 ? 图 像 与 排版 之 间 有 什么 关 
系 ? 排版 与 间距 之 间 有 什么 关系 ? 


TED 的 用 户 体 验 架 构 师 Michael McWatters 在 接受 采访 时 提 到 ， 
红色 以 正确 的 比例 出 现 对 于 TED 品牌 是 非常 重要 的 。 他 说 : 
“红色 应 该 谨慎 使 用 。 如 果 用 在 错误 的 地 方 ， 或 者 用 得 太 多 ， 
就 会 变 得 不 像 TED 了 。 

4.1.2 ”感知 性 模式 让 系统 更 为 连贯 

在 模块 化 的 系统 中 ， 想 要 做 到 视觉 上 的 连贯 统一 可 能 是 一 件 很 


Q) 出 自 2016 年 8 月 对 TED 用 户 体验 架构 师 Michael McWatters 的 采访 。 


| 


环 手 的 事情 。 模 块 征 由 不 同 的 人 根据 不 同 的 目的 创建 的 。 而 由 
于 感知 性 模式 是 闯 透 到 系统 中 各 个 部 分 的 ， 因 此 它们 可 以 将 系 
统 的 不 同 部 分 连接 起 来 。 如 果 这 种 连接 是 有 效 的， 那么 用 户 就 
会 感受 到 模块 之 则 的 统一 性 。 


看 看 Vox 和 《 卫 报 》 是 如 何 用 感知 性 模式 将 不 同 的 元 素 整 合 在 
一 起 的 〈 见 图 4-4)。 在 Vox， 醒 目的 图 像 上 覆盖 着 大 大 的 标题 、 
清 来 的 字体 和 宽大 的 留 白 ， 传 递 出 一 种 生活 杂志 的 感觉 一 一 宽 
散 、 韭 正式 ， 其 至 有 些 叛 逆 。 相 比 之 下 , 《 卫 报 》 的 排版 、 间 
距 、 图 像 和 配色 则 营造 出 更 密集 、 更 可 靠 的 感觉 ， 这 更 适合 于 
严肃 的 稿件 。2 
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VOX -0000 国 交 和 the 
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Doctor Who season 10 will Sat SOM 
debuts on Netflix, 
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make series history with its 
first openly gay co 
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Duck Dynasty and Giris, 
from beginning to end, 
have reflected a 
splintered America 


Newt Nom te a emot dad ato ea var cots 


bE HBO's Big Little Lies 
miniseries: reviews 
andi recaps 


图 4-4 Vox ( 左 ) 和 《 卫 报 》( 右 ) 网 站 截图 


不 仅 模块 之 间 可 以 连 为 一 体 ， 不 同 平 台 和 不 同上 下 文 之 间 也 可 
以 产生 这 种 连接 。 和 针对 特定 平台 的 标准 (如 Material Design ) 
对 如 何 设 计 和 构建 模式 给 出 了 相当 权威 的 观点 。 当 公司 严格 如 
循 原 生平 侣 惯例 时 ， 便 会 非常 依赖 于 感知 性 模式 ， 以 使 产品 成 
为 同一 品牌 的 一 部 分 。 


@) 这 些 截 图 是 在 2017 年 3 月 截 的 。 几 个 星期 后 ，VYox 将 他 们 的 设计 改 得 
更 加 密集 ， 给 人 报纸 般 的 感觉 ， 更 加 “可 信 ” 和 “漂亮 ”。 
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有 时 候 ， 即 便 是 最 小 的 东西 也 有 助 于 建立 联系 。 对 于 Twitter 来 
说 ， 尽 管 它 的 Web 应 用 、 原 生 应 用 和 第 三 方 平台 应 用 之 间 存 在 
差异 ， 但 是 像 心 形 “Like”( 喜 欢 ) 这 样 的 交互 细节 是 统一 的 ， 
这 有 助 于 传播 Twitter 的 模式 语言 ( 见 图 4-5)。 


4-5 这 是 Twitter 于 2015 年 推出 的 心 形 动画 的 定格 画面 ， 当 
时 出 现在 Twitter 的 Web 应 用 、iOS 应 用 、Android 应 用 、 
Windows 应 用 以 及 TweetDeck 客户 疹 等 


4.2 探索 感知 性 模式 


如 果 说 功能 性 模块 反映 的 是 用 户 需 要 且 想 要 的 内 容 ， 那 么 感知 
性 模式 关注 的 则 是 他 们 直观 的 感受 或 行为 。 感 知性 模式 并 非 来 
自用 户 的 行为 和 操作 ， 而 是 产品 尽力 打造 的 个 性 和 营造 的 氛围 
市 来 的 产物 。 


在 《网 站 情感 化 设计 》2 一 书 中 , 作者 Aarron Walter 提出 了 一 
个 简单 的 方法 ， 通 过 创建 “设计 角色 ”捕捉 产品 关键 的 个 性 
品质 ， 这 个 角色 体现 了 团队 希望 在 其 品牌 中 包含 的 特征 。 作 
者 Walter 还 建议 根据 真实 的 人 物 创 建设 计 角 色 ， 以 免 过 于 抽 
象 。 如 于 这 比较 难 ， 我 还 有 个 简单 一 些 的 方法 ， 就 是 构想 一 
个 地 方 及 其 氛围 ， 而 不 是 设想 某 个 人 的 个 性 特征 。 例 如 ， 能 


QD 该 书 与 另 一 本 小 书 合并 译作 《网 站 情感 化 设计 与 内 容 策略 》， 由 人 民 邮 
电 出 版 社 于 2014 年 出 版 。 一 一 译 者 注 
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将 注意 力 放 在 书写 上 的 氛围 而 非 令 人 放松 的 社交 环境 ， 会 古 
什么 样 的 呢 ? 


无 论 你 是 以 某 个 人 还 是 以 某 个 地 方 作为 出 发 点 ， 最 终 的 目标 
都 是 得 到 一 些 最 能 表现 你 品牌 的 特征 以 及 需要 避免 的 特征 
(Walter 建议 一 共 五 到 七 个 )。 对 于 MailChimp ， 这 些 特征 便 是 
“有 趣 ， 但 不 幼稚 ; 好 玩 ， 但 不 傻 ; 强大， 但 不 复杂 ; 时 尚 ， 
但 不 异类 ; 灵活 ， 但 不 随意 ”。 


接 下 来 ， 团 队 便 可 以 选择 如 何 将 这 些 特征 反映 到 界面 中 去 了 : 
语气 、 视 觉 元 素 、 交 互 、 声 音 等 。 对 于 MailChimp 来 说 ， 视 觉 
上 的 感知 性 模式 (Walter 称 作 “视觉 词典 ”) 包括 明亮 但 稍 不 饱 
和 的 配色 、 人 简单 的 无 衬 线 字 体 、 包 含 柔 和 细腻 纹理 的 局 平 界面 


元 素 ro 
妃 东 ， 于 二 可 io 


以 下 是 一 些 有 助 于 探索 感知 性 模式 的 流行 技巧 。 


4.2.1 情绪 板 


情绪 板 生 探索 不 同和 视觉 主 题 的 绝 佳 工具 。 可 以 使 用 数字 化 的 方 
式 创建 情绪 版 〈Pinterest 便 是 一 种 用 于 创建 数字 化 情绪 板 的 篆 
用 工具 )， 也 可 以 将 厅 志 或 其 他 印刷 材料 藤 下 来 ， 在 大 白板 上 
进行 实体 组 小 。 


有 些 人 使 用 情绪 板 来 研究 当前 趋势 或 收集 想法 ， 有 些 人 则 用 它 
们 来 探索 他 们 品牌 可 能 至 现 的 调 性 。 情 绪 板 上 的 素材 可 以 是 广 
泛 的 ， 也 可 以 局 限于 品牌 荣 些 特定 的 方面 ， 如 配色 或 排版 〈 见 
4-6)。 


Q) 这 一 段 取 自 Aarron Walter 的 《网 站 情感 化 设计 》 一 书 ， 同 时 收录 于 他 
的 文章 Personality in Design。 


邮 


MTV ONE 
| 


图 4-6 ”探索 色彩 和 渐变 的 情绪 板 的 例子 


4.2.2 ”样式 又 片 
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定义 好 了 大 致 的 品牌 方向 之 后 ， 便 可 以 使 用 样式 共 片 米 更 
加 细致 地 探究 多 种 可 能 性 。 样 式 琶 片 的 概念 ( 见 图 4-7) 由 
Samantha Warren 提出 ， 他 将 其 定义 为 “由 字体 、 颜 色 等 界面 元 


素 组 成 的 能 传递 Web 视 完 品 牌 精 侨 的 设计 交付 物 。 
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4-7 美国 华盛顿 州 检查 长 2012 年 竞选 网 站 (图 片 由 Samantha 


Warren 提供 ) 
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和 情绪 板 一 样 ， 样 式 合 片 可 以 为 用 户 和 产品 团队 提供 有 价值 的 
讨论 点 ， 并 至 现 他 们 对 等 定 设计 方 同 的 急 始 反应 。 把 不 同 的 样 
式 合 片 放 在 一 起 比较 ， 有 助 于 准确 地 找到 设计 方 癌 。 


4.2.3 元素 拼 贴 


在 样式 倒 片 的 基础 上 ，Dan Mall 提出 了 元 素 拼 贴 的 想法 ( 见 
图 4-8)， 就 是 将 界面 元 素 拼 贴 在 一 起 ， 探 索 品牌 在 界面 中 的 表 
达 方 式 。 作 为 一 种 设计 交付 物 ， 一 方面 ， 它 们 比 样式 合 片 更 加 
有 具体 和 有 形 ， 另 一 方面 ， 它 们 又 不 会 像 完 束 的 原型 图 那样 导致 
太 高 的 设计 期 望 。 元 素 拼 贴 探 索 的 不 仅 和 是 大 体 的 品牌 方向 ， 还 
包括 品牌 是 如 何 通过 界面 表达 出 来 的 。 
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4-8 RIF 网 站 的 元 素 拼 贴 


以 上 这 些 技术 之 间 的 差异 并 不 那么 明显 ， 可 以 混 着 使 用 它们 。 
对 我 来 说 ， 它 们 的 区 别 主 要 在 于 你 真 程度 的 差异 。 情 绪 板 较为 
es 它们 结合 不 同 来 产 的 现成 材料 ， 埋 造 出 一 种 视觉 
。 样 式 合 片 和 元 素 拼 贴 更 侧重 于 特定 的 产品 ， 以 及 模式 在 
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界面 中 的 实际 应 用 。 元 素 拼 贴 在 三 者 中 保 真 程度 最 高 ， 可 以 作 
为 构建 完整 原型 的 基础 。 


4.3” 达 代 与 改进 


将 样式 集成 到 产品 的 过 程 中 ， 样式 的 演变 还 将 持续 。 在 更 为 真 
实 的 界面 设置 中 ， 使 用 模块 和 交互 ， 进 行 品牌 上 的 尝试 ， 对 感 
知性 模式 和 功能 性 模式 的 改进 都 是 有 益 的 。 这 是 典型 的 迭代 过 
程 ， 不 同 的 模式 相互 影响 ， 直 到 最 终 设计 语言 得 以 成 形 。 


我 们 来 看 看 FutureLearm 的 样式 是 如 何 演 进 的 。 图 4-9 展示 了 
Wolff Olins 设计 公司 对 FutureLeam 品牌 最 初 的 尝试 。 尽 管 他 们 捕 
捉 到 了 FutureLeam 想 要 表现 的 一 些 个 性 〈 最 小 化 、 大 胆 、 明 亮 、 
积极 、 畅 快 )， 但 后 来 随 着 时 间 的 推移 还 是 产生 了 一 些 发 展 变 化 。 
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图 4-9 FutureLearn 最 初 的 品牌 
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几 个 月 后 ，FutureLearn 的 内 部 设计 团队 收 到 视觉 效果 时 ， 核 心 
的 感知 性 模式 是 这 样 的 〈 见 图 4-10) : 

03 GRADIENT 

The grodient represents moving through time. it con be used in three ways in its entirety, just from blue to pink, or just from pink to {nearly) yellow. 


04 COLOURS 


NR MACK 

pMS: Process Block 
MYK: ( 10 
RGB 58 52 56 
HEX; 36343o 


The colour polette is 5imple, pink meons now, blue means done ond yellow is in the future. Block, white and grey ore used to compliment these bold colours 


PMS: WHITE 
CMYKO000 
NGS: 255 255 255 
HEX FFFFFF 


05 FONTS 


Eur opq Bold 5Opt Europa Regular 20pt EUROPA REGULAR CAPS 13PT 


Europa js our only brond font. Bold (in block) is used on titles and buttons. Regulor (in cool grey) is used for body copy ond smoll uppercase headings. 


06 NAVIGATION 


SECTION TITLE | SECTION TITLE 


NEXT » 
The top strip shows an exomple of in poge navigotion, ond the bottom strip (including the lines) shows on exomple of content navigation, 


07 COMPONENTS 


Text fleld title Text field title 


Error messoge 


Here's a smoll somple of design components that hove been used in the product. Shown above in order ore form fields, buttons, course steps ond profile avatars- 


08 ICONS 
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4-10 ”FutureLearn 的 元 素 拼 贴 


将 模式 应 用 到 它们 需要 存在 的 实际 环境 中 ， 它 们 就 必须 变 得 更 
加 有 具体 、 实 用、 接地 气 。 下 面 是 FutureLearn 的 图 标 样式 如 何 从 
最 初 的 概念 演变 成 现 你 在 网 站 上 所 看 到 的 样子 的 〈 见 图 4-11 ) 。 
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图 4-11 ( 左 ) Wolff Olins 设计 公司 最 初 的 设计 演变 成 了 ( 右 ) 
FutureLearn 设计 团队 最 终 给 出 的 方案 。 两 套图 标 之 间 的 
差异 体现 了 学 习 的 过 程 永 未 止步 


在 品牌 发 展 的 概念 阶段 ， 重 要 的 是 拓宽 视野 ， 而 不 是 担心 细 
方 。 但 当 我 们 开始 将 概念 落实 的 时 候 ， 就 必须 对 它们 进行 改 
进 ， 以 适应 它们 所 处 的 新 环境 。 这 时 ， 工 作 的 重点 便 从 开放 却 
探索 转 问 了 精细 化 、 一 致 化 。 


在 这 个 阶段 ， 既 要 发 展品 牌 ， 又 要 保持 模 式 的 一 致 性 是 一 件 很 
有 挑战 性 的 事 。FutureLearn 的 创意 总 监 Lucy Blackwell 曾 说 
过 :;“ 当 你 专注 于 产品 一 致 性 的 时 候 ， 打 造 产 品质 感 的 一 些 重 
要 的 细微 之 处 就 有 可 能 会 丢失 。 


4.3.1 平衡 品牌 性 与 一 致 性 


产生 太 多 的 例外 会 削弱 品牌 性 ， 同 样 ， 过 分 关注 一 致 性 也 会 扼 
杀 品 牌 性 。 了 矛盾 在 于 ， 让 设计 达到 完美 的 一 致 性 无 法 确保 它 依 
然 具 有 很 强 的 品牌 性 。 有 时 ， 这 样 做 反而 会 削弱 品牌 性 一 一 在 
一 致 性 和 统一 性 之 间 存 在 着 细微 的 差别 。 


在 FutureLearn， 我 们 有 七 位 设计 师 在 不 同 的 环节 中 工作 ， 因 此 ， 
我 们 不 得 不 建立 流程 ， 让 我 们 的 设计 工作 具有 很 高 的 可 复 用 性 和 
实用 性 。 但 在 网 站 的 某 些 版 块 ， 我们 发 现 自 己 过 于 关注 可 复 用 
性 ， 造 成 了 对 品牌 性 的 削弱 。 图 4-12 是 课 程 页 面 的 演变 情况 
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图 4-12”( 左 ) 2015 年 FutureLearn 课程 页 面 ，( 右 ) 2016 年 底 的 
FutureLearn 课程 页 面 


让 设计 更 加 实用 、 清 晰 、 有 条 理 是 有 意义 的 。 这 样 做 对 搜索 引 
擎 优化 和 指标 有 花 ， 而 且 能 让 网 站 上 的 页 面 更 加 一 致 。 但 与 此 
同时 ， 这 样 做 会 丢失 示 些 产品 设计 急 期 的 独特 视 昭 特性 。 虽 然 
对 于 网 站 的 茶 些 部 分 ， 我 们 接受 这 一 变化 ， 但 在 其 他 地 方 ， 特 
别 征 品牌 介 销 活动 页 面 ， 我 们 开始 符 试 能 赠 强 品牌 性 的 设计 。 


如 采 一 个 设计 体系 过 分 妃 求 完美 的 一 致 性 ， 那 么 它 就 会 变 得 普 
通 、 伪 人 化。 发展 感知 性 模式 需要 为 设计 师 赋予 打破 备 规 的 权 
力 ， 豆 励 设 计 师 积极 地 探索 更 多 的 可 能 性 。 好 的 设计 体系 能 在 
品牌 的 一 致 性 和 创造 性 表达 之 间 取 得 平衡 。 


4.3.2 ”标志 性 时 刻 


即便 是 最 小 的 细 区 也 能 体现 感知 性 模式 的 存在 。Dan Saffer 在 
其 《 微 交 互 》” 一 书 中 创造 了 “标志 性 时 刻 ” 这 一 术语 , 用 于 指 
代 那 些 让 产品 有 差异 化 的 小 交互 ， 例 如 “优雅 的 加 载 动画 或 吸 
引 人 的 声音 (“你 有 新 邮件 了 ! “)”。 如 果 标 志 性 时 刻 是 有 含义 
的 或 者 背后 有 故事 的 ， 它 们 束 会 亚 得 尤其 强大 。 例 如 ， 在 TED 


Q) 此 书 已 由 人 民 邮 电 出 版 社 出 版 ， 详 见 http:/www.ituring.com.cn/book/1223。 


感知 性 模式 


网 站 上 点 击 播 放 按 钮 时 的 涟 注 效 末 ( 见 图 4-13)， 其 灵感 就 来 
源 于 其 视频 介绍 中 标志 性 的 水 滴 动画 。 
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图 4-13 ”TED 视频 介绍 的 水 滴 动 画 映射 了 播放 按钮 的 涟 痪 效果 


在 数字 产品 中 ， 标 志 性 时 刻 并 非 强 制 要 求 ， 一 些 团队 很 难 对 其 
进行 优先 级 排序 。™ 但 是 ， 小 的 细节 可 以 为 用 户 体 验 增 加 深度 
和 意义 。 当 我 们 为 设计 的 系统 化 和 结构 化 努力 的 时 候 ， 需 要 留 
意 那 些 能 让 产品 与 众 不 同 的 细 市 。 在 构建 设计 体系 的 时 候 ， 一 
定 要 为 创造 和 发 展 这 些 时 刻 而 留 足 空间 。 


4.3.3 “小 规模 试验 


我 们 如 何 为 创造 性 探索 留 空 间 呢 ? 我 们 如 何 将 新 的 样式 ?| 入 设 
计 体 系 呢 ? 根据 我 在 FutureLearn 的 经 验 ， 先 进行 一 些小 规模 的 
试验 是 一 种 相当 有 效 的 做 法 。 如 且 闲 些 元 素 的 效 末 很 好 ， 我 们 
就 逐 洁 将 它们 集成 到 其 他 界面 中 去 。 


例如 ， 在 学 习 者 完成 一 个 步骤 时 ， 我 们 感觉 纯 功 能 性 的 切换 按 
钮 缺乏 庆祝 和 成 就 的 避 【 冠 。 于 是 ， 我 们 用 市 有 圆 形 样式 、 弹 跳 
动画 以 及 色 号 图 标的 按钮 取代 了 先前 的 按钮 ( 见 图 4-14)。 


虽然 新 的 按钮 样式 受到 了 学 习 者 们 的 好 评 ， 但 它 与 设计 体系 的 
其 他 元 系 格 格 不 入 。 后 来 ， 我 们 开始 在 网 站 的 其 他 地 方 应 用 圆 


@D 关于 设计 微 交 互 并 将 其 集成 到 产品 中 的 实用 建议 ， 请 参阅 Dan Saffer 的 
《MD 
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What would you 
like to learn? 


第 4 草 


形 图 案 、 弹 跳动 画 和 勾 号 图 标 。 如 果 不 这 样 做 ， 那 么 整个 设计 


体系 给 人 鸭 感 觉 就 是 割裂 采 。 
Mark as 
complete 


图 4-14 ( 左 ) FutureLearn 上 早先 的 进度 按钮 ，( 右 ) FutureLearn 


上 重新 设计 的 按钮 


我 们 偶尔 会 在 营销 性 质 的 地 方 (如 主页 、 活 动 页 ) 尝试 新 的 模 
式 。 过 去 ，FutureLearn 的 品牌 主要 采用 方形 。 在 重新 设计 主页 
时 ， 我 们 引入 了 三 角形 的 图 和 案 。 从 那 以 后 ， 其 他 设计 师 开 始 将 
其 应 用 于 其 他 地 方 ， 如 图 像样 式 和 证 书 设计 ， 这 种 模式 也 得 到 
了 加 强 〈 见 图 4-15)。 


a 
A 


4-15 ( 左 ) 一 开始 ,在 主页 上 使 用 三 角形 的 试验 并 不 出 奇 , ( 右 ) 
但 当 其 他 设计 师 开始 采用 这 种 模式 并 将 其 应 用 到 他 们 的 
项 目 中 之 后 ， 这 件 事 就 有 了 新 的 意义 


竺 尝试 三 角形 图 案 的 时 候 ， 我 们 曾 担心 它们 与 FutureLearn 本 身 
的 方形 样式 不 相 容 ， 不 过 ， 我 们 还 是 想 试 一 试 ， 看 看 可 能 发 生 
什么 。 后 来 我 们 发 现 ， 虽 然 三 角形 能 与 品牌 性 相 容 ， 但 也 必须 


谨 蛋 使 用 。 仅 能 将 它们 用 作 探 索 和 和 圭 销 页 面 的 视觉 增 踢 ， 而 不 
能 在 读 程 学 习 体 难 页 面 上 使 用 。 


在 探索 新 样式 的 时 候 ， 请 先 在 网 站 的 一 小 块 区 域 进行 试验 。 打 
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破 常规 的 时 候 要 格外 小 心 ， 留 意 那 些 设 计 体 系 之 外 的 模式 ， 以 
尝试 这 些 模式 的 原因 。 如 果 它 们 起 作用 ， 就 将 它们 应 用 到 网 
站 的 其 他 区 域 ， 逐 渐 将 它们 融入 设计 体系 。 对 于 它们 所 承担 的 
角色 ， 需 要 格外 小 心 。 在 FutureLearn， 三 角形 用 于 创建 动态 效 
采 ， 圆 形 则 通 稍 与 勾 扎 图 标 一 起 使 用 ， 为 进度 的 完成 发 出 更 为 
积极 的 信号 。 


4.3.4 平衡 品牌 和 业务 需求 


由 于 感知 性 模式 有 时 仅 被 当 作 样 式 或 者 猴 饰 ， 因 此 改变 它们 币 
常 比 改 变 其 他 东西 (如 交互 流程 ) 更 容易 一 些 。 在 这 种 情况 


下 ， 临 时 业务 需求 便 可 能 导致 3 引入 不 符合 品牌 的 元 素 。 例 如 ， 
我 们 想 让 学 习 者 知道 新 课程 的 开始 时 间 ， 便 在 课程 缩 略 图 上 添 
加 了 黄色 飘带 ( 见 图 4-16)。 


ANTIQUITIES TRAFFICKING AND GOOD BRAIN, BAD BRAIN: DRUG IMPROVING YOUR IMAGE 
ART CRIME ORIGINS UNIVERSITY OF BIRMINGHAM 
UNIVERSITY OF GLASGOW UNIVERSITY OF BIRMINGHAM 


PALLIATIVE CARE TALKING ABOUT CANCER THE INTERNET OF THINGS 
LANCASTER UNIVERSITY CANCER RESEARCH UK KING'S COLLEGE LONDON 


4-16 ”FutureLearn 上 带 有 “Just started” (了 刚刚 开始 ) 字样 的 球 
市 用 于 突出 显示 最 近 开 始 学 习 的 课程 
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尽管 这 个 味 珊 从 品牌 的 角度 上 看 并 不 完美 ， 但 在 当时 课程 数量 
不 多 的 情况 下 ， 这 并 不 是 问题 。 我 们 没有 想到 的 是 ， 短 短 几 个 
月 内 ， 诬 程 数 量 猛 增 ,， 于 是 诬 程 模 块 的 平衡 感 被 打破 了 。 这 个 
页 面 开 始 变 得 伦 啊 ， 感 先 像 是 一 个 营销 页 面 ， 而 这 古 我 们 在 
FutureLearn 品牌 中 尽量 避免 的 感觉 。 然 而 ， 由 于 这 被 视 为 样式 
的 一 部 分 ， 所 以 优先 级 不 高 ， 于 是 需要 花费 很 长 时 间 来 解决 。 


无 论 我 们 如 何 你 护 品 牌 ， 这 些 事情 都 会 发 生 一 一 新 的 需求 需要 
定制 化 的 模式 以 及 一 次 性 的 调整 。 如 来 我 们 没有 意识 到 这 些 ， 
那么 这 些 例外 之 处 政 有 可 能 前 罚 品牌 性 。 


4.4 ”标志 性 模式 : 团队 练习 


有 时 候 ， 哪 怕 一 个 小 小 的 改动 也 会 影响 感知 。 在 FutureLearn， 
我 们 曾 用 圆 形 替 换 了 课程 进度 模块 中 的 方形 ， 却 发 现 这 样 做 会 
彻底 改变 界面 的 感觉 。 要 控制 一 个 事物 给 人 的 感觉 ， 就 需要 了 
解 影响 它 的 确切 模式 。 


你 不 妨 在 团队 中 做 一 个 快速 练习 。 让 每 个 人 写 下 产品 中 最 独特 
的 感知 性 模式 。 鼓 励 他 们 超越 配色 、 字 体 这 一 层次 ， 考 虑 更 高 
级 别 的 针对 品牌 的 原则 、 组 合 和 处 理 方 式 。 不 仅 要 想到 元 素 ， 
还 要 考虑 到 它们 背后 的 含义 一 一 它们 描绘 的 图 景 和 讲述 的 故事 。 
在 FutureLearn 的 界面 中 ， 这 样 的 模式 包括 以 下 这 些 : 


积极 的 、 或 励 性 的 语气 

主要 用 白色 ， 并 用 粉红 色 强 调 

大 面积 的 留 日 

通 第 用 较 大 的 字 写 ， 注 重 可 读 性 

高 对 比 的 排版 样式 ， 标 题 用 相对 较 大 的 字号 
鲜艳 的 粉红 色 到 监 色 的 渐变 

鼠标 巧 停 时 从 粉红 色 到 蓝 色 过 渡 的 动画 


DD DU DU UU 0 


感知 性 模式 


D 1 像素 浅 灰 色 的 线 
口 帘 有 “ 断 点 ”的 1 像素 方形 图 祭 
口 主要 用 方形 ， 偶 尔 在 促销 区 域 使 用 圆 形 和 三 角形 


就 像 在 第 2 章 中 讲 到 的 在 设计 原则 中 寻找 共识 的 方法 一 样 ， 对 
比 团队 各 成 员 的 想法 ， 可 以 看 出 你 对 品牌 的 认 知 。 这 些 特性 起 
人 急 可 能 有 些 售 糊 ， 但 它们 征讨 论 的 重要 基础 。 对 了 最 为 独特 的 感 
知性 模式 达成 共识 ， 是 未 来 将 它们 体系 化 的 有 用 起 点 。” 


模式 和 原则 是 设计 体系 的 重要 组 成 部 分 。 但 是 ， 在 团队 协作 的 
时 候 ， 仅 有 这 些 仍 站 不 够 的 。 选 几 个 词语 ， 定 儿 条 规则 无 法 形 
成 一 种 设计 语言 。 只 有 赋予 这 些 词 扎 以 含义 ， 并 在 团队 中 形成 
共识 ， 设 计 语言 才 会 形成 。 


QD 在 第 9 章 中 ， 我 们 将 讨论 如 何 制作 感知 性 模式 的 界面 清单 ， 以 及 如 何 将 
它们 集成 到 设计 体系 中 去 。 
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第 5 章 
二 SS 上 上 * 王 一 一 
共 至 及 计 语 言 


本 章 将 介绍 如 何 构 建 共 享 的 设计 语言 ， 从 而 让 团队 成 员 紧 密 协 
作 ， 为 他 们 的 产品 创造 模式 ， 并 使 用 这 些 模式 ，。 


数字 产品 部 十 由 团队 打 霹 的 。 团 队 里 的 每 个 人 部 有 各 目的 具体 
目标 ， 都 有 各 目的 礁 止 日 期 。 这 就 瑟 味 着 难免 会 出 现 捍 率 加 入 
的 模式 、 重 复 或 错误 鸭 模 块 。 


我 们 能 确 你 一 个 产品 即便 有 多 人 协作 ， 却 仍 能 连贯 、 统 一 吗 ? 
a oli 
理解 ， 我 们 就 能 做 到 这 一 点 。 这 意味 着 我 们 遵循 相同 的 指 

则 ， 我 们 对 品牌 愿景 的 理解 是 一 至 的， 我 们 在 设计 和 前 端 加 格 
方面 有 共享 的 方法 ， 我 们 知道 什么 样 的 模式 是 最 有 效 的 ， 也 知 
道 它们 的 工作 原理 。 换 句 话说 ， 创 建 统 一 的 设计 体系 需要 共享 


设计 语言 万 。o 


在 《建筑 的 永恒 之 道 》 一 书 中 ， 作 者 克里斯托弗 .亚历山大 介 
绍 了 “模式 语言 ”(pattern language) 的 概念 ， 将 其 作为 一 种 创 
造 充满 活力 、 让 人 愉悦 的 建筑 的 方式 。 该 书 的 核心 观点 便 是 ， 
许多 伟大 的 建筑 物 (如 沙特 尔 大 教堂 、 阿 尔 罕 布 拉 宫 、 布 鲁 内 
炉 斯 基 的 窒 顶 ) 并 不 是 由 一 位 主 建筑 师 在 绘图 板 上 费力 地 创造 
出 来 的 ， 而 是 由 一 群 人 构建 出 来 的 ， 这 群 人 对 能 将 这 些 建筑 物 
变 为 现实 的 设计 模式 有 着 深刻 的 共识 。 


ee 几 组 人 可 以 通过 遵循 一 个 共同 的 模式 语言 ， 当 场 构 思 出 他 
们 的 大 型 公共 建筑 ， 就 好 像 他 们 共有 一 个 心灵 。 
， 汽 的 永恒 之 道 》 


我 们 可 以 用 类 似 的 想法 构建 数字 产品 。 设 计 语 言 可 以 让 人 们 创 
建 出 具有 整体 感 的 产品 ， 哪 怕 不 同 的 人 人 负 贡 不 同 的 部 分 也 是 如 
此 。 当 然 ， 有 些 人 会 比 其 他 人 千 握 得 更 深入 一 些 ， 但 我 认为 每 
个 人 一 一 设计 师 、 开 发 人 员 、 研 究 人 员 、 产 品 经 理 、 内 容 制作 
人 一 一 都 应 该 向 握 到 一 定 的 程度 ， 且 随 着 时 间 的 推移 ， 团 队 继 
续 学 习 、 使 用 和 发 展 该 语言 ， 黎 担 程度 还 会 逐 产 所 升 。 


不 过 ， 亚 历 山大 在 他 的 书 中 没有 提 到 的 是 ， 需 要 花费 多 少 工作 
才能 形成 模式 语言 。 中 世纪 的 大 教 管 需要 数 十 年 才能 建成 ， 石 
折 需 要 经 过 多 年 的 训练 才能 笃 担 模式 语言 。 类 似 地 ， 在 产品 团 
队 中 建立 共享 语言 并 付 诸 实践 ， 也 需要 人 花费 大 量 的 精力 。 


不 过 ， 这 是 能 够 做 到 的 ， 即 便 是 在 更 大 的 团队 也 能 做 到 。 我 们 
可 以 从 关注 我 们 所 做 的 设计 语言 决策 入 手 。 


5.1 为 模式 命 


詹姆斯 布 里 顿 (James Britton) 是 一 位 有 影响 力 的 英国 教育 
家 ， 他 在 其 属 作 Language and Learning 中 提 到 ， 通 过 为 事物 
命名 ， 我 们 才 开 始 “让 其 存在 ”， 就 像 小 骇 面 对 周遭 世界 使 用 
“无 中 生 有 ”的 语言 一 样 。 同 样 ， 如 有 果 一 个 界面 上 的 元 素 没 有 
恰当 的 名 称 一 一 团队 里 人 尽 皆 知 的 名 称 一 一 那么 该 元 素 就 没有 
在 你 的 设计 体系 中 成 为 有 效 的 单元 。 一 旦 你 给 一 个 物件 命 了 
名 ， 你 就 塑造 了 它 的 未 来 。 例 如 ， 如 果 你 给 的 是 一 个 表现 型 的 
名 称 ， 那 么 它 将 来 就 会 受到 样式 的 限制 :“ 粉 红色 按钮 ”只 能 
是 粉红 色 。 


精心 挑选 的 名 称 可 以 成 为 构建 设计 体系 的 强大 工具 ， 因 为 名 称 
会 影响 模式 的 使 用 方式 。 当 然 ， 这 不 仅 关 乎 名 称 本 身 ， 更 重要 
的 是 建立 一 种 在 团队 中 共享 的 命名 方法 。 
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5.1.1 学 习 为 你 的 团队 创造 一 个 好 名 称 


对 不 同 的 团队 来 说 ，“ 好 名 称 ” 的 含义 也 不 一 样 。 有 时 需要 通 
过 实验 才能 找到 有 效 的 方法 。 人 德国 电信 公司 Sipgate 的 团队 一 
开始 使 用 了 表现 型 的 名 称 。 但 是 他 们 发 现 ， 像 “突出 的 Tile”™ 
或 “市 氮 的 圆圈 ”这样 的 名 称 效 末 很 兰 ， 节 终 寻 致 他 们 的 设计 
体系 碎片 化 。 


使 用 表现 型 的 命名 方式 的 主要 问题 是 ， 当 模式 库 里 模式 的 数量 增 大 
之 后 ， 你 就 很 难 找到 所 需 的 内 容 。 而 有 全 ， 当 你 需要 判断 某 个 模式 可 
以 用 在 什么 地 方 的 时 候 ， 这 样 的 命名 也 无 法 给 你 提供 指导 或 启示 。 
于 是 ， 有 人 开始 不 断 地 构建 新 的 模式 ， 而 不 是 复 用 或 增强 现 有 的 模 
式 ， 这 样 做 反而 让 问题 随 着 时 间 的 推移 而 变 得 越 来 越 严重 。” 
一 一 Tobias Ritterbach，Sipgate 公司 用 户 体 验 负 责 人 


在 Atlassian, 组 件 是 从 用 户 的 角度 命名 的 。 例 如 ,“Lozenges”2 
和 “行内 编辑 框 ” 这 两 个 名 称 之 所 以 这 样 命 名 ， 束 是 因为 他 们 
的 用 户 是 这 样 叫 的 。 起 初 ， 这 样 的 命名 是 有 和 争议 的 ， 有 人 认为 
这 样 做 会 对 开发 带 来 额外 的 负担 。 但 该 团队 认为 ， 以 这 种 方式 
为 模块 命名 ， 能 让 工程 师 也 能 站 在 用 户 的 角度 思考 问题 ， 并 始 
终 把 用 户 放 在 心 上 。 


这 样 做 对 工程 师 来 说 有 一 点 小 的 负担 ， 但 在 某 种 程度 上 ， 能 让 
他 们 对 用 户 感同身受 。”" 
Jiirgen Spangl，Atlassian 公司 设计 负责 人 


Q) Tile 的 本 义 是 “瓷砖 "， 在 用 户 界 面 中 特 指 一 种 由 多 个 方块 构成 的 样式 ， 
尤 见于 Windows 平台 的 设计 语言 。 有 人 译作 “ 磁 贴 ”， 但 此 译 法 并 未 广 
这 接受 和 使 用 。 在 Microsoft 官方 中 文 文档 中 该 词 未 做 翻译 ， 此 处 沿用 
了 这 种 做 法 。 一 一 译 者 注 

@) 出 自 2016 年 8 月 对 Sipgate 公 司 前 用 户 体 验 人 负责 人 Tobias Ritterbach 的 采访 。 

G) Lozenges 的 本 义 是 “ 含 片 ”， 在 Atlassian 的 用 户 界面 中 特 指 一 种 表示 状 
态 的 短小 文字 方块 ， 通 常 带 有 不 同 的 颜色 。 一 一 译 者 注 

(4) 出自 2016 年 11 月 对 Atlassian 公司 设计 负责 人 jiirgen Spangl 的 采访 。 


在 FutureLearn， 我 们 认为 ， 一 个 好 名 称 必须 是 聚焦 的 、 令 人 难 
瑟 的 ， 能 体现 它 所 代表 的 模块 的 目的 。 这 样 的 名 称 让 人 能 容易 
关联 ， 容 易 想 到 。 同 其 他 团队 一 样 ， 我 们 也 堂 试 过 不 同 的 方式 
来 命名 一 一 既 有 精确 的 描述 性 命名 (如 “进度 转换 按钮 ")， 也 
有 有 趣 的 命名 (如 “耳语 框 ”)。 


看 过 多 个 团队 如 何 使 用 模块 的 案例 之 后 ， 我 们 和 广 意 到 ， 设 计 体 
系 中 最 有 效 的 名 称 往往 具有 这 些 特 性 中 的 一 个 或 多 个 : 它们 使 
用 了 隐喻 ， 它 们 是 有 个 性 的 ， 它 们 能 传达 模式 的 目的 。 


5.1.2 ”好 名 称 是 基于 隐喻 的 


出 自 其 他 领域 (如 建筑 领域 、 出 版 领域 ) 的 隐喻 ， 可 以 启发 出 
好 的 名 称 。 隐 喻 能 让 团队 更 容易 记 住 这 个 名 称 ， 因 为 当 人 们 想 
到 那个 模块 的 时 候 ， 会 产生 联想 一 一 可 以 想象 的 对 象 。 


在 建筑 领域 ,“ 支 架 ”(Brackets) 是 对 一 种 结构 进行 支撑 和 加 
国 的 东西 ， 例 如 ， 有 一 种 支架 是 用 于 支撑 屋顶 的 。 类 似 地 ， 在 
FutureLearn 的 界面 中 ,“ 支 架 ” 是 用 于 支持 主要 内 容 的 小 块 辅 
助 信息 ( 见 图 5-1)。 


上 芭 2 
Learn anything Learn together Learn with experts 
Choose from hundreds of free online Join an online course and meet other Meet educators from top universities and 
ourses: from Language & Culture to learners from around the world. Learning cultural institutions, wholl share their 
B ment; Science & y and | as chatting with perience through videos, articles, 
Technology to Health & Psychology. group of friends. quizzes and discussions. 
View all courses See how it works Meet our partners 


图 5-1 “支架 ”提供 辅助 性 的 信息 ， 以 支持 页 面 的 主要 内 容 


另 一 个 例子 是 “聚光灯 ”(Spotlight) ， 它 指 的 是 一 种 宣传 元 素 ， 
旨 在 吸引 用 户 对 特定 内 容 的 关注 ( 见 图 $-2 ) 。 


(1) 原文 为 “Whisperbox”， 在 FutureLearn 的 设计 体系 中 指 的 是 一 种 次 要 但 
可 能 引起 用 户 兴 趣 的 区 域 。 译 者 注 
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i 
5-2 “聚光灯 ”是 一 种 宣传 元 素 ， 旨 在 吸引 用 户 对 特定 内 容 的 


文 架 和 “聚光灯 ”都 征 有 效 的 名 称 一 一 团队 里 的 人 都 知道 它 
们 ， 也 在 使 用 它们 。 如 采 疫 有 视觉 隐喻 的 存在 ， 名 称 的 效 采 束 
会 打折 。 


例如 ， 很 少 有 人 能 记 住 “进度 转换 按钮 ”( 见 图 5-3) 是 什么 ， 
“二 元 单 选 按 钮 ”( 见 图 5-4) 又 是 什么 样 的 。 


Mark as 


complete 


5-3 ”进度 转换 按钮 


Was this review helpful? 
Was this review helpful? 


图 5-4 ”二 元 单 选 按钮 

问题 是 ,，“ 进 度 转换 按钮 ”和 “二 元 单 选 按钮 ”都 不 会 在 你 脑 
诲 里 创建 一 个 图 像 ， 因 此 这 些 模 式 是 很 难 记 住 的 。 即 便 有 人 偏 
爱 更 为 精确 和 描述 性 名 称 〈 如 “二 元 单 选 按钮 ") ， 但 事实 是 没 
有 人 能 记 住 这 样 的 名 称 。 如 末 疫 有 人 能 记 住 ， 人 们 束 很 有 可 能 
新 建 模 式 ， 而 不 是 复 用 模式 。 


语言 71 


5.1.3 ”好 名 称 有 个 性 


有 些 按钮 的 名 称 效果 奇 佳 。FutureLearn 的 界面 上 有 些小 的 辅助 
性 按钮 ( 见 图 5-5)， 它 们 被 称 作 “ 小 黄 人 ”"，。 


| ore ore 


5-5 “小 黄 人 ”按钮 


当然 ， 有 小 黄 人 的 地 方 也 应 该 有 老板 (Boss)。 在 FutureLearn， 
“老板 ”是 一 种 大 按钮 的 名 称 ， 这 种 按钮 通常 用 于 页 面 上 主要 
的 行动 召唤 ( 见 图 5-6)。 


Join now — starts 6 Jun 


5-6 “老板 ”按钮 


@ 原文 为 “Minions”, 同名 电影 被 译作 《小 黄 人 大 有 眼 萌 》, 该 单词 的 本 义 为 “ 仆 
从 ， 下 属 ”， 因 此 下 文 提 到 “有 小 黄 人 的 地 方 也 应 该 有 老板 ”。 一 -一 译 者 注 
@) 小 黄 人 的 版 权 由 环球 影 业 所 有 。 


7 


第 5 章 


在 CSS 中 看 到 .minion 和 .boss 这 样 的 类 名 ( 见 图 5-7) 也 
是 很 有 意思 的 事情 。9 


5-7 CSS 中 的 .minion 和 .boss 类 名 


有 个 性 的 名 称 更 容易 记 住 。 它 们 不 仅 莹 绕 耳 旁 ， 还 能 月 发 其 他 
名 称 ， 其 至 可 以 建立 一 个 系列 的 名 称 。FutureLearn 的 “耳语 
框 ”(Whisperbox) 模块 则 在 用 于 不 会 过 分 引 人 关 注 的 促销 区 
域 。 但 当 另 一 个 团队 需要 更 为 醒目 的 东西 时 ， 他 们 创建 了 了“ 爱 
鸣 框 ”(Boombox)。“ 耳 语 框 ”和 “ 比 鸣 框 ” 是 一 对 儿 ， 这 有 助 
于 增强 词汇 的 相关 性 ， 从 而 让 人 更 容易 记 住 。 


5.1.4 好 名 称 能 传达 目的 


当 你 需要 判断 茶 个 模式 可 以 用 在 什么 地 方 的 时 候 ， 好 的 名 称 能 
给 予 指导 或 局 示 。 一 个 页 面 上 可 以 有 多 个 “小 芮 人 ， 但 只 能 
有 一 个 “老板 ， 这 很 容易 记 住 。 大 家 喜欢 使 用 这 样 的 名 称 ， 
我 们 不 必 强 制 推行 操作 指责 ， 因 为 这 些 名 称 日 沉 指责 。 即 便 只 
有 少数 几 个 这 样 的 名 称 ， 也 能 让 你 们 的 词汇 库 变 得 更 有 吸引 
力 ， 团 队 成 员 也 更 有 可 能 使 用 它们 ， 并 为 之 做 出 页 献 。 


名 称 不 仅 能 让 我 们 识别 和 区 分 模式 ， 还 可 以 摘 述 它们 的 目的 。 


Q) 在 FutureLearn 的 界面 中 还 有 很 多 其 他 的 按钮 样式 ， 这 里 展示 的 只 是 最 
为 有 效 的 两 个 例子 。 


共享 设计 语言 73 


在 没有 完全 理解 模式 的 目的 时 ， 命 名 尤其 困难 。 如 二 你 发 现 目 
己 怎 么 也 想 不 出 一 个 请 意 的 名 称 ， 那 么 很 有 可 能 是 茶 些 地 方 出 
了 问题 。 也 许 古 模块 的 目的 不 明确 ， 或 者 不 同 的 模块 有 所 重 
登 。 无 论 息 哪 种 情况 ， 你 都 应 该 开始 警惕 。 


欧洲 之 星 在 其 新 界面 中 引入 了 一 个 专门 用 于 改进 SEO 的 模块 
( 见 图 5-8)。 在 模式 库 研 讨 会 上 ， 团 队 费 尽 脑力 也 想 不 出 一 个 名 
称 :“ 这 是 一 个 SEO 模块 ! 它 投 有 功能 。 它 的 存在 没有 意义 ! 


Take the train to Paris 


= 


What’s on board? 


There’s a travel class to Suit every budget and style, and with sockets at every 
it and free wi-fi for all, you can stay in the loop all the way 


ym 


Arriving at Paris Gare du Nord 


图 5-8 欧洲 之 星 界面 中 专门 用 于 改进 SEO 的 模块 


他 们 最 终 给 出 的 名 称 是 “le blurb”?。 而 他 们 把 le blurb 的 目的 描 
述 成 : 为 改进 SEO 而 提供 的 可 能 有 趣 的 信息 。 

用 幽默 的 方式 解决 命名 困难 的 回 题 可 能 是 种 办 法 。 但 是 ， 我 们 
没有 理由 这 样 做 ,命名 不 应 该 这 么 难 。 我 们 应 该 问 问 自己 ， 哪 
里 出 了 错 ? 为 什么 我 们 想 不 出 一 个 好 名 称 ? 


CO le blurb 是 法 语 ,，“ 模 糊 ” 的 意思 。 一 一 译 者 注 
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5.1.5 协同 命名 


如 霖 命名 过 程 是 团队 成 员 一 起 协作 完成 的 ， 我 们 就 能 更 好 地 理 
解 模 式 的 目的 。 这 并 不 意味 着 整个 公司 者 要 参与 进来 ， 关 键 不 
在 于 人 数 ， 而 在 于 视角 的 多 样 性 。 在 编写 CSS 的 时 候 ， 为 模块 
命名 的 任务 往往 沙 在 开发 人 员 时 上， 但 如 琳 扩 大 命名 过 程 ， 让 
更 多 的 人 参与 进来 ， 命 名 就 会 变 得 更 容易 一 些 。 


不 同 领域 的 人 对 模块 的 看 法 也 稍 有 不 同 。 有 内 容 管理 背景 的 
人 可 能 会 以 更 为 通用 的 方式 看 竺 模块 ， 因 为 他 们 需要 灵活 性 。 
开发 人 员 可 能 关注 技术 细 广 ， 因 为 他 们 了 解 模块 是 如 何 构 建 
的 一 一 他 们 知道 哪些 东西 定单 选 按钮 ， 即 使 它们 看 起 来 不 像 是 
单 选 按钮 。 设 计 师 和 用 户 研究 人 员 则 可 能 更 熟悉 模式 所 支持 的 
原始 行为 。 让 具有 不 同 观点 的 人 参与 讨论 ， 有 助 于 对 模块 的 目 
的 做 出 更 明智 、 更 客观 的 决策 。 一 旦 明确 了 目的 ， 命 名 就 会 容 
多 得 多 。 


协同 命名 还 有 助 于 让 那些 不 参与 模式 设计 与 构建 的 团队 成 员 
了 解 如 何 使 用 模式 。 例 如 ， 让 内 容 团 队 参 与 命名 会 让 他 们 感 
觉 目 己 对 模块 的 设计 和 构建 站 有 帮助 的 ， 而 不 是 只 能 简单 地 
填充 内 容 。 


5.1.6 ”建立 专用 频 遭 


想 要 协同 命名 ， 一 种 简单 的 方法 就 是 在 日 弟 使 用 的 协作 软件 上 
建立 专用 空间 (例如 在 Slack 上 建立 “设计 体系 ”频道 )。 你 可 
以 在 团队 内 部 将 设计 原型 或 现 有 模块 分 享 出 来 ， 并 向 要 描述 其 
用 途 和 亮点 。 你 可 以 说 :“ 这 通 贡 表示 附加 的 或 文 撑 性 的 信息 
被 分 割 成 更 小 的 块 。 如 于 你 能 列 出 当前 已 经 想到 的 名 称 ， 那 
也 是 有 帮助 的 〈 见 图 5-9)。 


ot Write agreet Get ready for 
rm sbjects pplicaton rovertity 
一 Do es eta Oe to Wiha noed 
Cas orn PP am 
< og ere et 
ce em mrevpororey 


We think it should be something to do with the fact that it's additional info divided / portioned/ into 
everal chunks 


陪 simon.pearson 
#muggctsofjoy 
(not helping) 
jamesmockett 
lsthat entire thing one component orisit3instanccs of the same component that happens to be displayed ina 3 
column grid? 
mseckington 


triglyph is the phrase | was initially thinking of (because of the 3x) 


jusna 
器 Maybe these are more like the metopes that go between triglyphs 


mseckington 


yeah, thinking about it | can imagine triglyph being a similar thing, but with icons/images? 


图 5-9 对 这 个 模块 来 说 ,“ 趣 味 金 块 ”(Nuggets of joy) 也 许 是 个 
不 错 的 名 称 ， 但 我 们 决定 在 本 例 中 使 用 “支架 ” 


只 有 少数 几 个 人 加 入 了 讨论 ， 提 出 了 问题 或 想法 。 有 的 建议 并 
不 徘 详 ， 有 有 的 则 纯 属 搞笑 。 没 关系 一 一 重 扩 是 3 发 讨论 。 讨 论 
设计 决策 和 模式 目的 ， 对 共享 设计 语言 的 加 强 和 发 展 征 有 帮助 
的 。 ”如果 你 看 到 一 个 好 名 称 ， 要 记得 称赞 并 庆贺 。 正 是 这 样 
的 时 刻 凝 聚 了 团队 ， 并 让 协同 命名 成 为 团队 文化 的 一 部 分 。 


5.1.7 跟 用 户 一 起 测试 设计 语言 


你 可 能 希望 更 进一步 ， 让 用 户 也 参与 到 设计 语言 的 决策 中 来 。 
这 时 ,不妨 尝试 使 用 纸 质 卡片 开展 对 模块 的 测试 ( 见 图 5-10)。 
使 用 纸 质 卡片 进行 测试 与 其 他 用 户 研 究 技 术 不 同 ， 后 者 使 用 线 
性 任务 和 场景 供用 户 完成 。 前 者 参与 者 可 以 拿 起 卡片 、 移 动 卡 
刻 、 讨 论 卡 片上 的 内 容 、 在 卡片 上 涂 牧 等， 积极 地 参与 到 设计 


此 外 , 将 新 的 设计 分 享 出 来 以 后 , 有 人 可 能 会 发 现 类 似 的 模块 已 经 存在 ， 
于 征 便 避 免 了 重复 。 
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过 程 中 去 。 在 这 个 过 程 中 ， 你 将 有 机 会 测试 你 的 语言 选择 ， 检 
查 你 所 定义 的 模块 与 用 户 的 潜在 行为 和 心智 模型 是 否 一 致 。 你 
有 可 能 发 现 你 的 “重要 标签 页 ”被 完全 忽视 ， 抑 或 你 的 “ 同 导 
控件 ”被 理解 为 一 组 可 选 的 标签 页 。 


ee li f 
| 


Pi 


Sal ju RN 司 
图 5-10 “将 模块 裁剪 下 来 开展 用 户 研 究 


不 过 ， 尽 管 让 团队 成 员 和 用 户 参 与 到 命名 过 程 中 来 是 很 有 用 的 
手段 ， 但 保持 专注 也 同样 重要 ， 不 要 陷入 无 休止 的 讨论 中 去 。 
有 了 时 过 多 的 想法 反而 会 导致 含糊 不 清 的 名 称 。 为 了 避免 这 种 情 
况 ， 在 FutureLearn， 我 们 会 接受 这 些 建议 ， 但 将 最 终 裁 决 权 留 
给 负责 模块 的 设计 人 员 和 开发 人 员 。 


5.2 将 团队 融入 设计 语言 


仅仅 完成 依 名 还 不 足以 建立 共享 的 设计 语言 。 整 个 团队 都 应 该 
沉浸 到 设计 语言 中 去 ， 让 它 无 所 不 在 。 只 要 创造 了 合适 的 条 件 ， 
让 设计 语言 得 到 皮 光 ， 即 便 是 那些 起 初 不 感 兴趣 的 人 ， 也 会 被 
动 地 学 习 设 计 语 言 。 下 而 是 关于 创建 这 样 的 条 件 的 一 些 提示 。 


5.2.1 让 设计 模式 变 得 可 见 


可 以 在 墙 上 开辟 一 块 专门 展示 设计 体系 的 空间 ， 将 它 称 作 “ 模 
式 墙 ”( 见 图 5-11)。 


5-11 FutureLearn 办 公 室 里 的 模式 墙 


模式 墙 让 你 可 以 一 蜗 整 个 设计 体系 。 这 是 讨论 命名 同 题 的 绝 佳 
空间 ， 因 为 你 可 以 直接 引用 茶 个 模式 一 一 无 须 在 整个 网 站 上 搜 
索 ， 也 无 须 记 住 它们 的 外 观 。 拥 有 一 个 专门 的 空间 也 会 让 你 的 
设计 体系 更 加 开放 : 人 们 会 感觉 你 欢迎 他 们 的 加 入 ， 欢 迎 他 们 
提出 问题 甚至 做 出 页 献 。 


不 需要 很 大 的 空间 来 布置 模式 增 ， 因 为 并 非 所 有 产品 界面 都 需 
要 张贴 出 来 。 


应 当 从 最 重要 或 取 第 用 的 界面 开始 。 将 它们 打印 在 A3 纸 上 ， 
贴 在 墙 上 ， 并 将 最 突出 的 模式 标记 出 来 。 最 好 按照 妈 闸 见 的 用 
户 轨 迹 来 排列 这 些 界面 的 顺序 ， 例 如 :发现 界面 、 登 录 界 面 、 
比较 产品 、 进 行 购买 。 


在 让 设计 模式 变 得 可 见 的 时 候 ， 你 可 以 发 挥 一 些 创意 。MOO 
是 一 家 数码 印刷 与 设计 公司 ， 他 们 团队 将 其 样式 指南 中 的 一 些 
页 面 打印 到 了 MOO 明信片 上 ( 见 图 5-12)， 让 员工 可 以 随手 取 
到 ， 以 供 参 考 。 
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图 5-12 一 些 MOO 的 样式 指南 明信片 


还 可 以 设置 自动 提醒 。 只 需 花 几 分 钟 束 可 以 设置 一 个 Slack 机 
器 人 ， 让 它 适时 地 提醒 团队 成 员 各 种 不 同 的 元 素 分 别 叫 作 什么 
( 见 图 5-13)。 
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图 5-13 Slack 机 器 人 提醒 团队 “路 标 ”(Signpost) 模块 是 什么 样 的 


GD 还 有 一 些 工 具 ， 如 Brand.ai 和 Frontify， 可 以 与 Slack 集成 ， 当 模式 库 更 
新 时 , 它们 可 以 提醒 相关 频道 的 用 户 。 关 于 这 些 工 具 的 介绍 ,参见 第 10 章 。 


5.2.2 引用 事物 的 名 称 


所 有 语言 的 共同 特点 十， 只 有 不 停 地 使 用 才能 让 它 保 持 活 力 。 
它 需 要 成 为 日 前 对 话 的 一 部 分 。 这 融 征 为 什么 需要 有 意识 地 使 
用 约定 好 的 名 称 去 引用 这 些 模式 很 重要 一 一 无 论 这 个 名 称 听 起 
来 有 多 柯 怪 。 


“耳语 框 ” 是 FutureLearn 的 一 种 促销 模块 ( 见 图 $-14)。 顾 名 
思 义 ， 这 种 模块 就 像 轻 再 耳语 ， 不 会 9 起 过 多 的 注 苇 。 


信 
Get a personalised, printed certificate 


You can buy a Statement of Participation for this course 一 a personalised certificate in both digital and 


printed formats 一 to show that you've taken part. 
5-14 “耳语 框 ”: FutureLearn 网 站 上 一 种 轻 量 级 的 促销 模块 


在 我 们 为 它 找到 一 个 恰当 的 名 称 之 前 ， 我 们 一 直 将 它 称 作 “中 
间 有 图 标的 一 条 线 所 表示 的 区 域 。 这 样 命名 没 动脑 筋 ， 结 采 ， 
重新 命名 为 “耳语 框 ” 的 过 程 便 伦 避 了 更 多 的 精力 。 如 采 你 

法 使 用 实际 的 名 称 引 用 一 个 模式 ， 它 在 你 的 设计 体系 中 就 无 法 
成 为 可 操作 的 模式 。 每 次 使 用 模式 名 称 ， 都 会 中 化 这 个 模 云 ， 
让 它 更 进一步 地 融入 设计 语言 。 


这 样 做 需要 团队 具有 一 定 程度 的 目 律 性 。 这 可 能 很 难 ， 特 别 古 
如 果 你 不 习惯 这 些 名 称 的 话 。( 设 想 你 加 入 了 一 个 团队 ， 这 里 
每 个 人 都 在 谈论 “小 芮 人 “老板 ”和 “耳语 框 ”! ) 但 很 快 
这 些 名 称 就 会 成 为 正 第 谈话 的 一 部 分 ， 人 们 会 习惯 它 。 我 们 的 
目标 是 ， 当 你 提 到 一 个 名 称 的 时 候 ， 每 个 人 都 明确 地 知道 你 在 
什么 。 让 每 个 人 都 知道 序列 导航 这 一 模式 的 目的 ， 并 将 其 叫 
作 “ 序 列 导航 ”， 而 不 是 “一 串 气 泡 ” 或 者 “向 导 控 件 ”。 在 设 
计 文 件 和 程序 代码 中 自然 也 要 使 用 同一 名 称 。 


了 
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第 5 章 


5.2.3 ”将 设计 体系 作为 入 职 培训 的 一 部 分 


将 设计 体系 的 内 容 作 为 人 职 培 训 的 一 部 分 ， 新 员工 了 解 设 计 体 
系 就 会 更 加 容易 。 当 Atlassian 的 新 员工 和 人 职 时 ， 他 们 将 了 解 到 
设计 指责 是 如 何 创建 出 来 的 ， 这 样 他 们 就 可 以 理解 为 什么 以 及 
如 何 做 出 决策 。 在 FutureLearn 内 部 ， 我 们 创建 了 一 个 入 门 性 质 
的 线 上 课程 ， 其 中 有 一 攻 专 门 对 模式 库 进 行 了 介绍 ， 并 包含 了 
一 些小 测验 和 小 课程 〈 见 图 5-15)。 


5.4 WHY PATTERN LIBRARY? ARTICLE 


FutureLearn Pattern Library 


FutureLearn pattern library is the main point of reference for the UI patterns 
we Use, so that everyone internally can refer to them. 


5.5 ”ATOMIC DESIGN METHODOLOGY ARTICLE 
癌 HOW HAVING A PATTERN LIBRARY AFFECTS THE WAY WE WORK ARTICLE 


ADVANCED: TEST YOUR KNOWLEDGE GUIZ 
5-15 ”FutureLearn 线 上 课程 中 关于 模式 库 的 一 章 
5.2.4 定期 组 织 设 计 体 系 会 议 


每 个 人 都 讨厌 开会 。 但 征 ， 如 东 你 希望 每 个 人 都 跟 得 上 议 计 体 
系 的 有 发展 ， 那 么 组 织 名 开设 计 体 系 的 会 议 束 是 必要 的 。 这 契 所 
有 设计 师 和 开发 人 员 共 同 专 注 于 设计 体系 的 时 间 。 


例会 可 以 在 16 ~ 20 人 的 团队 中 进行 ， 对 于 更 大 的 团队 ， 可 以 
让 不 同 的 人 轮流 参 会 。 例 会 不 需要 花费 很 长 的 时 间 一 一 如 琳 你 
有 一 个 结构 合理 的 议程 ， 通 闸 半 个 小 时 束 足 够 了 。 一 开始 ， 可 
以 每 周 举 行 一 次 ， 当 团队 找到 玉芝 之 后 ， 可 以 每 两 周 举行 一 
次 。 团 队 可 以 利用 例会 时 间 就 产品 的 总 体 模式 (如 图 标 、 排 


版 ) 得 出 一 致意 见 。 同 时 ， 这 也 起 分 享 新 模块 并 讨论 其 目的 、 
用 途 及 可 能 遇 到 的 问题 的 好 机 会 。 


5.2.5 ”鼓励 多 样 化 协作 


尽 可 能 地 尝试 将 模式 的 设计 和 构建 与 其 他 领域 结合 。 前 两 章 
介绍 的 所 有 方法 都 有 助 于 在 不 同 领域 协作 并 建立 共享 的 设计 


下 和 


i 


IT 
Lll 


口 创建 模式 映射 

D 打造 专注 于 特定 模式 的 界面 清单 

D 绘制 模式 结构 

口 就 模式 的 目的 达成 一 致 ， 并 为 模式 命名 
D 对 模式 进行 兰 释 ， 形 成 产品 的 感觉 

口 用 新 模式 进行 小 规模 试验 


在 任何 团队 中 ， 都 会 有 一 些 人 比 其 他 人 更 熟悉 团队 的 模式 话 
言 ， 对 其 设计 体系 的 使 用 更 有 热情 ， 这 些 人 目 然 倾 问 于 彼此 合 
作 。 但 是 ， 仍 然 应 该 尽 可 能 地 或 励 他 们 与 其 他 的 每 一 个 人 一 起 
工作 ， 这 样 他 们 就 会 将 目 己 的 知识 和 热情 传递 给 那些 不 太 融 入 
设计 体系 的 人 。 将 设计 体系 的 内 容 传 播 到 整个 组 织 ， 这 会 让 设 
计 体 系 变 得 更 有 弹性 。 


5.2.6 ”维护 一 份 术 语 表 


维护 一 份 术语 表 是 分 享 和 发 展 设 计 语 言 最 有 效 的 做 法 之 一 。 创 
建 并 维护 一 份 术语 表 会 让 你 有 意识 地 关注 目 己 所 使 用 的 词汇 ， 
因为 你 必须 清楚 地 写 下 这 些 词汇 。 客 户 服务 平台 Intercom 的 团 
以 表示 ， 他 们 维护 术语 表 ( 见 图 5-16) 是 为 了 人 确保 “从 代码 到 
客户 都 使 用 相同 的 语言 ”。 


81 


82 


UI INtrERcoM 


All Collections > Intercom's key features explained > The Intercom Glossary 


The Intercom Glossary 


These are words you'll commonly see When you use Intercom 


© Written by Elizabeth McGuane 
Updated over a week ago 


Trying to understand something that's not defined here? Ask us ina message — and w 
e can add it to the llst 


A-C 

Active user 

A user that has logged into your product recently (the default is 30 days). 
Article 


An article is a content type in our Educate product. Articles are designed to hold answ 
ers to the questions your customers ask and search for, as Well as product guidance a 
nd best practice advice. They can be added to collections that live on a public Help C 
enter, or you can add them to conversations {you'll need an Intercom product that has 
a team inbox to do this). 


Article reactions 


Every Educate article has three reactions at the bottom, so people can tell you if the ar 
ticle answered their question. This lets you know how well your content is doing. Plus, 
every time someone clicks on a negative 名 reaction, theyll be sent an automatic repl 
yinthe Messenger, giving you a second chance to solve their problem. Then you can 

use their feedback to improve the article for future visitors. 


Assignment 


You can assign conversations to any teammate or team in your company and move itt 
otheir inbox. 


Keep reading: Routing messages Using assignment rules 


图 5-16 ”Intercom 术语 表 


当然 ， 一 个 更 新 及 时 、 易 于 访问 的 模式 库 ， 也 可 以 成 为 可 靠 的 
设计 模式 术语 表 ， 供 整个 团队 参考 〈 同 时 也 是 设计 和 构建 界面 
模式 的 实用 工具 箱 )。™ 


i td i 了 一 种 工具 ， 更 在 于 其 所 营造 的 
言 环境 。 ee Ce ee 上 、 讨 
Wa 曾 释 语言 决策 的 习惯 这 很 重要 。 


每 个 团队 的 协作 程度 部 是 不 一 样 交 ， 大 家 对 每 天 讨论 设计 原则 
和 模式 的 开放 态度 也 是 不 一 样 的 。 建 立 共享 的 设计 语言 需要 茶 


( 我 们 将 在 第 10 章 详 细 讨 论 模式 库 。 


图 灵 社 区 会 员 ChenyangGao(2339083510@qq.com，) 专 享 尊重 版 权 


种 团队 文化 的 支持 。 但 事情 也 可 以 反 过 来 看 一 一 将 关 广 设 计 话 
言 的 工作 流程 | 入 团队 ， 也 能 带 来 更 好 的 协作 。 三 年 前 ,在 
FutureLearn， 我 们 没有 共享 设计 语言 ， 我 们 也 无 法 像 今 天 这 样 
多 地 进行 协作 。 设 计 师 在 PDF 文档 中 记录 模式 ， 而 开发 人 员 则 
构建 着 目 己 的 前 冰 样 式 指 瑞 。 虽 然 这 两 个 文档 对 各 上 自 都 有 用 ， 
但 它们 并 没有 提供 共享 的 语言 基础 。 后 来 ， 经 过 一 系列 实践 ， 
我 们 未 潮 改 变 了 上 自己 的 工作 方式 。 


建立 共 圣 的 设计 语言 始终 是 一 个 源 进 的 、 震 碎 的 过 程 。 有 时 这 
个 过 程 会 变 得 混乱 和 缓慢 ， 但 只 要 你 继续 下 去 ， 你 还 是 会 看 到 
设计 语言 不 断 地 变 好 、 变 强 。 最 终 ， 你 会 在 目 己 的 团队 、 合 作 
方 其 至 股东 层面 看 到 效果 一 一 他 们 开始 了 解 你 想 要 实现 的 目标 ， 
并 跟 你 一 起 实现 这 一 目标 。 
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第 一 部 分 总 结 


在 本 书 的 第 一 部 分 ， 我 们 讨论 了 构建 设计 体系 的 基础 。 下 面 总 
结 一 下 其 中 的 要 扩 。 


目的 


设计 体系 的 目的 是 帮助 实现 产品 的 目的 :“ 十 分 钟 毫 饪 出 健康 
膳食 “ 尽 可 能 广汉 地 传播 读 讲 “每 时 每 刻 都 播放 对 的 音乐 。 
设计 体系 中 的 所 有 内 容 一 一 大 到 团队 运作 方式 ， 小 到 最 小 的 模 
式 一 一 都 应 该 为 了 实现 这 些 目 标 进 行 优化 。 


原则 


团队 在 设计 时 需要 判断 如 何 实现 产品 的 目的 。 其 设计 方法 和 优 
先 级 的 选择 应 当 基 于 一 系列 原则 :“ 为 第 一 印象 设计 “适当 高 
于 一 人 致 ” 进 求 永 恒 ， 而 不 是 妃 求 滑 流 。 团 队 对 原则 的 认识 越 
一 至， 他 们 创 千 的 模式 就 越 有 凝聚 力 。 

模式 

我 们 打造 的 界面 冒 在 帮助 人 们 实现 菜 种 目标 并 创造 菜 种 感受 : 
学 习 新 的 食谱 ， 专 注 于 写作 ， 感 到 高 效 ， 受 到 歌舞 。 我 们 的 设 
计 意 图 是 通过 设计 模式 表现 出 来 的 。 功 能 性 模式 支持 用 户 的 行 
为 和 操作 : “选择 食材 “选择 蘑 谱 “跟着 采 谱 做 末 ” “给 米 谱 
打分 。 感 知性 模式 关注 的 是 产品 给 人 的 直观 感受 :“ 实 用 主 
义 “ 像 报纸 一 样 “开放 热情 。 整 个 团队 需要 充分 理解 模式 
的 目的 。 只 有 这 样 ， 才 能 确保 它 和 用 户 的 预期 是 一 致 的 。 


第 二 部 他 总 邱 


共享 语言 

模式 应 该 通过 一 种 共享 的 设计 语言 连接 起 来 。 共 部 的 设计 语言 
是 团队 为 打造 有 效 且 统一 的 用 户 体验 而 形成 的 关于 创建 和 使 用 
设计 模式 的 根深 带 固 的 知识 。 这 些 知识 是 通过 共享 的 设计 方 
法 、 前 端 架 构 、 品 牌 愿景 和 日 常 实践 (如 协作 命名 、 跨 领域 配 
对 、 使 模式 可 见 、 打 造 第 规 界面 库 、 模 式 库 维护 等 ) 传播 的 。 
设计 语言 应 该 不 断 地 演进 、 增 强 、 杰 代 和 测试 。 


了 解 设计 体系 是 如 何 运 转 的 


设计 体系 不 是 一 夜 之 间 构 建 出 来 的 ， 而 是 通过 日 第 的 实践 未 源 
形成 的 。 如 雪 你 正在 围绕 一 于 数字 产品 进行 设计 ， 那 么 设计 体 
系 的 基础 可 能 已 经 存在 。 无 论 你 怎样 设计 和 构建 界面 ， 它 们 最 
终 都 会 呈现 在 用 户 面 前 。 只 要 这 个 过 程 不 是 完全 随机 的 ， 你 就 
已 经 有 了 设计 体系 。 


可 问题 是 ， 这 是 什么 类 型 的 体系 呢 ?” 它 是 灵活 应 变 的 ， 还 是 目 
标 单 一 的 ? 它 是 疑 为 一 体 的 ， 还 是 支离破碎 的 ? 它 古 简洁 易 用 
的 ， 还 是 有 抹 烦 费时 的 ? 它 是 独立 目 治 的 ， 还 十 等 级 森严 鸭 ? 


为 了 让 设计 体系 更 加 有 效 ， 我 们 需要 知道 它 征 如 何 运 转 的 ， 它 
包含 什么 ， 使 它 运 转 恨 好 或 不 好 的 原因 是 什么 。 如 采 我 们 不 了 
解 这 些 ， 那 么 同样 的 问题 还 会 出 现 〈 并 且 是 系统 性 地 出 现 ! )。 
我 们 梳理 了 所 有 的 按钮 ， 六 个 月 后 却 发 现 义 多 出 来 好 多 按钮 。 
我 们 解决 了 一 个 问题 ， 但 如 末 没 有 改变 产生 回 题 的 机 制 ， 同 样 
的 问题 将 会 不 断 出 现 。 
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不 同 设计 体系 的 运转 方式 也 不 同 。 你 们 的 组 织 染 构 、 团 队 文 化 、 
设计 方法 、 项 目 内 容 其 至 你 们 所 处 的 物理 空间 ， 都 将 影 啊 你 们 
的 设计 体系 。 在 本 书 的 第 二 部 分 中 ， 我 们 将 首先 介绍 影响 设计 
体系 的 底层 结构 ， 然 后 讨论 建立 和 维护 设计 体系 的 技术 ， 包 括 : 


D 规划 

D 打造 功能 性 界面 清单 

口 建立 模式 库 

口 创建 、 记 录 、 发 展 和 维护 设计 模式 


图 灵 社 区 会 员 ChenyangGao(2339083510@qq.com) 专 享 


尊重 版 权 


Sal 
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设计 体系 的 参数 


本 章 将 介绍 设计 体系 应 该 具备 的 一 些 特 性 ， 以 及 控制 风险 和 扶 
六 的 万 法 。 


Sipgate 团队 遇 到 了 问题 。 他 们 的 产品 网 站 上 出 现 了 重复 和 不 一 
致 的 情况 ， 这 不 仅 降 低 了 品牌 的 水 准 ， 也 让 整个 团队 做 了 不 少 
不 必要 的 工作 。 于 十， 他 们 决定 通过 构建 模式 库 来 解决 这 个 问 
题 。 在 儿 周 的 时 间 里 ， 他 们 通过 召开 人 研讨 会 、 建 并 界面 库 ， 完 
成 了 产品 网 站 模式 的 标准 化 。 几 个 月 后 ， 他 们 推出 了 一 个 全 新 
的 模式 库 。 


在 有 些 公司 ， 激 发 团队 成 员 对 公司 模式 库 的 兴趣 是 一 件 很 难 的 
事 。 这 些 团队 成 员 看 不 到 模式 库 的 价值 ， 也 不 会 为 其 做 页 献 。 
但 在 Sipgate 并 役 有 出 现 这 样 的 情况 ， 所 有 产品 团队 的 人 都 勤 
但 而 高 效 地 记录 着 他 们 的 模式 。 


他 们 从 不 缺乏 热情 。 但 古 一 年 过 后 ， 模 块 数量 变 得 非 弟 多 ， 找 
到 想 要 的 模块 和 理解 该 用 哪个 模块 变 得 非 剃 困难。 然而， 添加 
新 的 模块 却 容 易 得 多 。 于 是 ， 在 维护 了 模式 库 一 年 之 后 ， 他 们 
的 网 站 仍然 充满 了 重复 的 模式 ， 哪 怕 配 有 完整 文档 的 模式 也 是 
如 此 。 


设计 体系 的 构建 不 是 从 建 并 模式 库 开 始 的 ， 也 不 会 因 模 式 库 的 
建成 而 结束 。 有 影 啊 设计 体系 的 因素 有 很 多 ， 如 组 织 架 构 、 团 队 
文化 、 产 品类 型 、 设 计 方 法 等 。 


为 了 了 解 这 些 因 素 古 如 何 发 挥 作用 的 ， 一 种 可 靠 的 方法 古 从 以 
下 三 个 维度 去 分 析 设 计 体系 : 规则 的 严格 程度 、 部 件 的 模块 化 
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程度 和 组 织 的 分 散 程 度 ( 见 图 6-1)。 


规则 


严格 宽松 
部 件 
模块 化 集成 化 
组 织 
集中 式 分 敌 式 


6-1 从 三 个 维度 分 析 设 计 体 系 


ds 


这 些 参数 不 是 二 元 的 ， 所 有 公司 在 每 个 维度 上 都 处 于 某 个 位 
轩 


。 通 过 分 析 不 同 公司 的 烘 例 ， 我 们 对 这 个 问题 做 了 深入 的 人 研 
究 ， 了 解 了 每 个 方 癌 的 优 缺 点 。 


6.1 规则 : 严格 或 宽松 


有 些 设计 体系 是 很 严格 的 ， 有 些 却 因 宽松 而 受益 。 我 们 来 看 两 
个 例子 : Airbnb 和 TED。 


6.1.1 Airbnb 


Airbnb 在 全 球 拥有 2000 多 名 员工 ， 有 大 约 60 名 产品 设计 师 
人 负责 多 个 工作 流 。 该 公司 的 设计 体系 完全 是 由 其 设计 语言 体系 
(DLS) 团队 管理 的 。 该 团队 由 六 名 设计 师 以 及 同 他 们 合作 的 工 
程 师 (包含 Web 端 、 原 生 移 动 端 及 React Native 平台 ) 构成 。 


Airbnb 的 设计 体系 是 很 严格 的 : 它 有 精确 的 规则 和 流程 ， 并 且 
了 要求 严格 计 守 。 
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1. 标准 化 的 规范 


为 了 最 大 限度 地 减 小 偏差 ，Airbnb 的 DLS 精确 地 定义 了 它 所 包 
舍 的 模块 。 例 如 ， 它 严格 地 定义 了 排版 处 理 ， 网 格 的 间距 是 8 像 
过 ,交互 方式 都 有 说 明 ， 关 于 命名 也 有 一 致 的 约定 。 图 6-2 展示 
了 他 们 的 主 Sketch 文件 里 是 如 何 定义 “Marquee” 模块 的 。 请 注 
意 ， 每 种 情况 都 有 两 个 示例 ， 显 示 了 设计 师 可 用 的 一 些 选 项 。 


Entry Marquee Document Marquee Input Marquee 


Entry Marquee ee 


Input Marquee 


6-2 Airbnb 主 Sketch 文件 里 的 “Marquee” 模 块 
2. 设计 与 工程 完全 同步 


在 Airbnb 的 设计 体系 中 ,设计 与 工程 是 完全 同步 的 。 具 体 来 
说 ， 这 和 车 味 着 以 下 三 扩 。 


口 主 Sketch 文件 里 的 设计 模块 与 代码 实现 完全 相同 ， 并 保持 
同步 。 
口 Sketch 文件 里 的 名 称 与 代码 中 的 名 称 是 匹配 的 。 


CD Marquee 的 本 义 是 “天 幕 ”， 在 Web 设计 领域 里 指 的 是 一 块 能 深 动 的 区 
域 。 一 一 译 者 注 
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口 所 有 模块 都 是 跨 平 台 的 : Sketch 文件 中 绘制 的 每 一 个 组 件 ， 
在 iOS、Android、React Native 和 了 啊 应 式 Web 库 等 平台 中 都 
有 尽 可 能 相似 的 实现 。 


同步 工作 被 视 为 优先 事项 。 为 了 实现 同步 ，Airbnb 团队 甚至 打 
造 了 一 些 自 定 义 的 工具 ， 如 Sketch 插件 ( 见 图 6-3 ) 。 


Aims to make it faster and easier to create consistent, 
effective, and beautiful products. 


Tools for you 


S Web Components | 
6-3 ”所 有 DLS 资源 的 入 口 
3. 严格 的 引入 新 模式 的 流程 


DLS 团队 章 在 为 整个 公司 的 产品 设计 师 提供 全 部 所 需 的 模式 。 
他 们 的 目标 是 重用 大 约 90% 的 现 有 模块 ， 因 此 创建 新 模式 的 情 
况 相 对 较 少 。 他 们 引入 新 组 件 的 流程 非 弟 严格 。 


(1) 设计 人 员 首 先 使 用 Sketch 模板 提交 提案 ， 其 中 包含 对 相关 
行为 和 规则 的 说 明 。 他 们 还 需要 提出 一 个 恰当 的 名 称 ， 并 
提供 如 何在 界面 中 使 用 该 组 件 的 示例 。 

(2) 这 份 舍 有 Sketch 文件 的 提案 将 通过 JIRA 递交 给 产品 支持 团 
队 。 在 很 多 情况 下 ， 产 品 文 持 团队 发 现 类 似 的 模块 已 经 存 
在 ， 或 者 只 需要 对 杀 个 现 有 模块 进行 更 新 。 
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(3) 如 采 确 实 需要 引入 一 个 新 的 模块 ， 那 么 该 提案 将 被 转发 到 
DLS 团队 ， 该 团队 会 考虑 该 提案 ， 并 判断 提议 的 设计 是 否 
可 行 。 有 时 他 们 会 直接 采纳 提案， 有 时 会 加 以 修改 甚至 重 
新 设计 ， 以 确保 该 模块 和 整个 设计 体系 相 匹 配 。 


4. 全 面 详尽 的 文档 


Airbnb 的 内 部 网 站 上 有 设计 语言 的 文档 ， 即 DLS 指南 。 该 指 
南 是 由 主 Sketch 文件 生成 的 。Airbnb 的 工具 团队 构建 了 一 个 自 
动 化 工具 ， 可 以 用 它 自动 生成 组 件 的 屏幕 截图 和 元 数据 ， 并 将 
其 发 布 到 DLS 指南 的 网 站 ( 见 图 6-4) 上去。 显然， 这样 生 成 
的 文档 与 Sketch 文件 和 代码 是 完全 同步 的 。 


Principles 


rr 
“Nm 
OY 
Conversational 


6-4 ”内 部 的 DLS 指南 网 站 


正定 上 述 这些 做 法 确保 了 DLS 是 一 个 严格 的 设计 体系 。 不 过 ， 
与 之 相反 的 是 ， 有 些 公司 却 选 择 了 较为 宽松 的 架构 。 宽 松 的 设 
计 体系 倾 曲 于 根据 试验 的 结 末 和 环境 的 变化 而 不 断 改 进 。 这 样 
的 设计 体系 也 是 有 效 的 。 
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6.1.2 TED 


TED 团队 的 规模 很 小 ， 只 有 六 个 人 主要 负责 与 设计 体系 相关 的 
决策 。 这 六 人 包括 两 名 用 户 体 验 从 业者 和 四 名 前 端 开发 人 员 。 
TED 的 设计 体系 是 很 松散 的 。 他 们 优先 芳 虑 的 是 品牌 的 感 沉 和 
页 面 的 实用 性 ， 而 不 古 完 美的 视 完 一 致 性 。 


例如 ， 引 入 即 外 的 颜色 或 偏离 标准 的 布局 都 不 是 大 问题 ， 只 要 
这 有 助 于 实现 正确 的 效 朱 。 


做 正确 的 设计 ， 而 非 一 致 的 设计 。 优 先 考 虑 的 应 当 是 把 页 面 本 
身 做 到 最 好 。 为 此 我 们 不 断 地 改进 页 面 ， 以 期 达到 最 佳 效 果 。 
不 应 该 用 教条 式 的 一 致 性 和 已 有 的 模式 去 驱动 设计 决策 。” 了 

Michael McWatters，TED 用 户 体 验 架 构 师 


在 这 种 设计 体系 下 ， 有 很 大 的 空间 去 开展 创造 性 试验 。 由 于 每 
个 页 面 都 可 以 进行 微调 ， 因 此 它们 能 适应 不 同 的 环境 和 场景 。 
在 这 样 的 设计 体系 下 产生 的 设计 可 能 是 连贯 的 ， 但 不 一 定 是 完 
全 一 致 的 。 同 Airbnb 的 方法 相 比 ，TED 的 流程 显得 更 为 松散 
和 随意 。 


1. 简单 的 草图 胜 过 详尽 的 规格 说 明 


TED 的 团队 经 稼 在 白板 或 纸 上 画 低 保 真 的 章 图 ， 并 辅 以 简单 的 
笔记 ， 而 不 是 详尽 的 规格 说 明 〈 见 图 6-5)。 接 着 ， 通 过 当面 分 
享 这 些 草 图 ， 或 将 其 发 布 在 Dropbox 或 InVision 上 上， 团队 开 始 
交换 意见 ， 收 集 反 馈 。 然 后 ， 设 计 人 员 和 开发 人 员 一 起 协作 ， 
做 出 高 保 真 的 设计 图 。 


QD) 出 自 2016 年 8 月 对 TED 用 户 体 验 架 构 师 Michael McWatters 的 采访 。 
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图 6-5 TED 团队 经 常 使 用 带 有 简单 笔记 的 草图 ， 而 非 详尽 的 设计 
规格 说 明 


2. 简单 的 文档 


他 们 的 文档 也 很 简单 。 他 们 没有 全 面 的 模式 库 ， 而 十 在 网 页 和 
Sketch 文件 中 有 一 个 简单 的 样本 集合 ( 见 图 6-6) ， 这 里 面包 含 
了 一 些 核心 的 设计 模式 ， 但 绝 非 全 部 。 


也 许 你 会 认为 ， 这 是 因为 TED 的 团队 很 小 ， 没 有 时 间 和 资源 来 
构建 全 面 的 模式 库 。 但 事实 并 非 如 此 。 目 前 还 没有 必要 详细 i 记 
孙 所 有 内容。 如 林 团 队 开始 扩大 ， 情 况 有 可 能 会 发 生变 化 。 但 
他 们 强调 ， 即 使 有 了 模式 库 ， 也 不 会 用 模式 驱动 设计 。Michael 
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McWatters 表示 :“ 设 计 的 敏锐 性 和 对 环境 的 敏感 性 始终 是 第 一 
位 ， 即 使 这 意味 看 在 攻 些 情况 下 模式 会 被 忽略 或 修改 。 


TED Sketch Swatches 


perwpea We iT Sa» 


pm 一 一 “EC EE 
.hi1 Happy talks te 
.:h2 The death of innovation, the end of growth 
h3 Beyond the tak 
WA -com 
hes A es Race with the machines 
hh} Whry | marst Sf"02h ret alert lmste cov 
: © @- © @— 
er 四 四 -一 外 -一 四 -一 - 
i © @— 外- 四 -一 
bgiyou don' 1 © [9 H-— 《 一 * 
ee > 4 一 - Pp— 一 
v @- O~— ©— 


图 6-6 ”TED 的 一 部 分 样本 ， 放 在 一 个 Sketch 文件 


尽管 TED 的 界面 设计 能 适应 独特 的 环境 ， 有 时 会 破坏 已 有 的 模 
式 ， 但 该 团队 依然 认为 ， 他 们 的 设计 体系 能 够 有 效 地 生成 满足 
用 户 需 求 的 设计 。 


让 这 样 的 设计 体系 保持 有 效 的 原因 并 不 是 严格 的 规 泡 和 流程 ， 
而 是 次 次 植 根 于 团队 文化 中 的 共享 的 设计 知识 。 该 团队 的 成 员 
对 其 产品 愿景 ( 尽 可 能 广泛 地 传播 思想 ) 和 设计 方法 的 认识 
是 完全 同步 的 。 模 式 的 设计 均 遵 循 共同 的 原则 (如 “追求 永 
恒 ， 而 不 古 妃 求 潮流 ”)， 而 他 们 对 这 些 模 式 的 目的 及 其 用 法 也 
有 着 深刻 且 一 致 的 理解 。 这 种 共享 的 知识 才 是 该 设计 体系 尽管 
松 节 却 仍 保持 有 效 的 基础 。 


95 


90 


6.1.3 ”权衡 利 浆 ， 做 出 选择 


这 是 两 个 截然 相反 的 例子 ， 但是， 这些 参 数 的 值 显然 不 古 二 元 
的 : 所 有 团队 都 位 于 维度 上 的 某 个 地 方 。 乍 看 起 来 ， 严 格 与 公 
司 规模 有 关 一 一 建立 时 间 越 短 、 规 模 越 小 的 设计 体系 ， 越 倾 癌 
于 选择 宽松 的 样式 ， 以 保留 更 多 的 自由 度 和 试验 的 机 会 。 而 随 
着 设计 体系 的 发 展 ， 它 会 变 得 越 来 越 严 格 。 但 也 许 事实 并 没有 
那么 简单 。 我 曾经 在 一 个 小 团队 里 工作 ， 团 队 中 有 一 位 能 干 却 
独裁 的 创 划 总监， 他 严格 地 把 控 所 有 设计 输出 。 这 便 是 一 个 虽 
然 很 小 却 非常 严格 的 体系 。 你 也 可 以 想象 一 个 设计 体系 相当 松 
耿 的 大 公司 ， 它 歌 励 每 个 团队 开展 试验 并 做 出 目 己 的 决定 。 寺 
择 严格 还 是 宽松 跟 团 队 规模 没有 多 大 关系 ， 这 一 问题 应 该 由 团 
队 的 做 事 方式 和 优先 级 所 决定 。 


通 第 来 说 ， 较 为 严格 的 设计 体系 更 能 你 证 精确 、 可 预期 的 产 出 
和 视觉 上 的 一 致 性 。 但 与 此 同时 ， 严 格 的 设计 体系 也 有 可 能 
于 僵化 ， 例 如 为 了 保持 一 致 性 而 牺牲 用 户 体验 。 


为 了 避免 这 种 情况 ， 束 应 该 留 有 一 些 发 生 例外 的 机 会 ， 如 开展 创 
造 性 的 试验 或 副业 项 目 “。 人 们 需要 理解 规则 ， 并 能 质疑 这 些 规 
则 。 如 采 疫 有 充分 理解 规则 ， 束 容 多 忽略 规则 或 履 兰 规则 。 因 
此 , 一 份 消 晰 、 全 面 、 有 说 服 力 的 文档 是 这 类 设计 体系 的 基础 。 


对 于 优先 芳 虑 对 环境 的 敏感 性 和 对 实验 的 友好 性 的 产品 ， 松 散 
的 设计 体系 非常 合适 。 但 是 ， 在 TED 运行 效 末 民 好 的 松散 的 设 
计 体 系 ， 在 其 他 公司 可 能 很 快 束 会 变 得 文 离 人 破碎、 遍 乱 不 堪 。 


想 要 拥有 像 TED 那样 简单 、 灵 活 的 设计 体系 ， 团 队 里 的 每 个 人 都 
需要 完全 同步 地 理解 产品 的 目的 和 设计 方法 ， 这 些 都 需要 次 闪 扎 
根 于 团队 文化 之 中 。 即 使 是 松散 的 设计 体系 ， 也 需要 坚实 的 基础 。 


QD 副业 项 目 (side project) 指 的 是 在 主要 工作 之 外 发 起 的 创新 性 小 项 目 ， 
它 仍然 是 公司 内 的 工作 ， 而 非 业余 个 人 项 目 。 一 一 译 者 注 
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6.2 部 件 : 模块 化 或 集成 化 


所 有 系统 都 是 由 不 同 的 部 件 构 成 的 。 不 过 ， 在 拥有 设计 体系 的 
情况 下 ， 模 块 化 不 仅 意 味 着 系统 由 部 件 构成 ， 还 意味 着 不 同 的 
部 件 是 可 互 换 的 ， 它 们 能 以 各 种 方式 组 装 在 一 起 ， 以 满足 不 同 
的 或 者 不 断 变 化 的 用 户 目 标 ( 见 图 6-7)。 


和 


图 6-7 像 包 之 斯 建筑 游戏 (Bauhaus Bauspiel) 这 样 的 模块 化 设计 ， 
能 够 适应 不 同 的 需求 


模块 化 的 方法 有 很 多 已 知 的 优点 。 


它 非 党 敏捷 ， 因 为 多 个 团队 可 以 并 行 地 设计 和 构建 模块 。 
它 经 济 有 效 ， 因 为 这 些 模块 可 以 重复 使 用 。 

它 容 多 人 维护， 因为 修复 一 个 模块 的 回 题 不 会 影 啊 其 他 模块 。 
它 具 有 适应 性 ， 因 为 模块 可 以 根据 不 同 的 用 户 需 求 来 组 装 
它 具 有 生成 性 ， 这 意味 着 可 以 通过 引入 新 的 模式 或 以 新 的 方 
却 组 合 现 有 模式 来 产生 全 新 的 效 末 。 
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与 模块 化 结构 相对 的 古 集 成 化 的 设计 方法 。 集 成 化 的 设计 也 古 
由 部 件 构 成 的 ， 但 这 些 部 件 不 可 互 换 ， 因 为 它们 之 间 的 连接 并 
未 考虑 需要 适应 不 同 的 处 理 方式 ( 见 图 6-8)。 


图 6-8 集成 化 的 设计 是 针对 特定 目标 进行 优化 的 


集成 化 的 设计 也 有 很 多 优点 。 


D 它们 可 以 古 针对 特定 内 容 、 特 定 痛 景 、 特 定 故 事 或 特定 创作 
方 癌 的。 

口 它们 往往 更 为 连贯 ， 更 加 凝 为 一 体 〈 相 反 ， 模 块 化 结构 则 可 
能 让 人 感觉 是 脱 市 的 )。 

口 它们 可 以 更 快 地 构建 出 来 ， 因 为 不 需要 伦 时 间 芳 虑 部 件 的 复 
用 问题 。 

D 它们 更 容易 协调 ， 因 为 团队 中 的 每 个 人 都 朝 着 同一 个 目标 而 
努力 。 


我 们 在 网 络 上 讨论 设计 体系 的 时 修 总 是 强调 组 件 的 模块 化 和 标 
准 化 。 我 们 谈论 模式 应 该 如 何 变 得 模块 化 、 可 复 用 ， 好 像 一 切 
都 应 该 像 乐 高 玩具 一 样 。 然 而 ， 模 块 化 的 程度 应 当 取 决 于 你 的 
团队 和 产品 的 实际 情况 。 


6.2.1 ”模块 化 与 用 尸体 验 


使 用 模 英 化 的 方法 ， 不 仅 要 考虑 效率 的 提升 和 成 本 的 降低 ， 还 
要 考虑 它 对 用 户 的 好 处 和 对 产品 体验 的 增强 。 在 建筑 领域 有 一 
些 这 样 的 和 案例， 模块 化 不 仅 增 强 了 体验 ， 还 成 了 该 建筑 的 标志 
性 特征 。 


设计 体系 的 参数 99 


彪马 城 (Puma City) 是 一 个 零售 商店 ， 它 由 24 个 货物 集装箱 
组 成 〈 见 图 6-9)。 这 些 集装箱 可 以 拆 印 和 重新 组 装 。 这 种 建筑 
可 以 游 走 在 世界 各 地 ， 区 原 因 训 在 于 它 是 异化 的 这 也 古 其 
设计 的 关键 : 集 猜 钉 组 疼 在 一 起 的 方式 形成 了 建筑 的 个 性 。 以 
不 同 的 方式 移动 集装箱 ， 就 能 创造 出 不 同 的 室外 空 露 合 
和 内 部 结构 。 即 使 彪马 的 标志 因为 集装箱 的 错落 而 变 得 碎 裂 ， 
这 种 效果 也 是 创作 的 一 部 分 ， 这 是 该 建 软 A 0 
因素 。 


天 权 


本 


| al 网， 
wt ll SA 


LE | pl” Wk 


6-9 由 LOTEK 设计 的 彪马 城 (图 片 来 源 :Sibyl Kramer 的 “The 
Box” ) 


下 面 来 看 一 个 集成 化 建筑 的 例子 。 日 本 高 松 的 Greendo 公寓 大 
楼 ( 见 图 6-10) 建 在 山 的 一 侧 ， 共 有 五 层 ， 它 每 一 户 的 屋顶 都 
是 另 一 户 的 花园 。 这 个 建筑 不 仅 与 整个 景观 融 为 一 体 ， 还 与 这 
瞩 土 地 一 起 呼吸 一 一 利用 上 自然 的 隔绝 和 来 目地 球 的 热量 来 保持 
内 部 但 定 的 瘟 度 。 


图 灵 社 区 会 员 ChenyangGao(2339083510@qq.com) 专 享 尊重 版 权 
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6-10 ”Keita Nagata 设计 的 Greendo 公寓 

有 时 模块 化 在 实施 层面 的 价值 很 大 ， 但 对 设计 没有 帮助 ， 有 时 
则 恰恰 相反 。 下 面 这 个 位 于 巴黎 的 学 生 公 寓 ( 见 图 6-11) 看 起 
来 是 模块 化 的 ， 它 就 像 是 由 旋转 角度 不 同 的 “篮子 ”构成 的 。 


6-11 OFIS 建筑 师 设 计 的 “篮子 公寓 ” 


但 事实 上 ， 阳 台 的 位 置 和 阳台 突出 的 方式 恰恰 是 该 建筑 想 要 给 
人 传递 的 感觉 。 在 这 种 情况 下 ， 说 该 建筑 征 宛 全 模块 化 的 ， 这 
种 观点 是 站 不 住 脚 的 ， 不 过 它 确 实 至 现 出 了 一 种 模块 化 的 美 
感 。 反 之 亦 然 。 


价 而 言 之 ， 一 味 妃 求 模块 化 并 非 总 是 好 的 。 模 块 化 的 程度 应 该 
取决 于 你 想 实现 的 目标 。 
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6.2.2 ”模块 化 与 项 目 需 求 的 范围 
通常 ， 模 块 化 方法 适用 于 具有 以 下 特点 的 产品 : 


D 需要 扩张 和 发 展 
D 需要 适应 不 同 的 用 户 需 

D 需要 大 量 重复 的 部 件 

D 需要 让 多 个 团队 能 够 并 行 、 独 立地 开展 工作 


这 样 的 产品 包括 电子 商务 、 新 闻 、 在 线 学 习 、 人 金融 、 政 府 等 大 规 
模 网 站 一 一 任何 需要 扩张 和 发 展 以 及 应 对 不 同 用 户 需 求 的 网 站 。 


当 模 块 化 成 为 品牌 和 产品 体验 的 一 部 分 时 ， 事 情 束 会 变 得 特别 
有 趣 。 例 如 ， 在 Flipboard 中 ， 模 块 化 的 布局 是 其 设计 和 品牌 的 
核心 要 义 〈 见 图 6-12)。 这 样 做 也 让 其 品牌 显得 与 众 个 同 ， 每 
个 杂志 页 面 的 布局 都 特别 独特 、 漆 元 ， 束 像 是 编辑 和 设计 师 专 
门 为 你 打造 的 。” 


Mm ete en rt Dovesor Sars Hom Becks Proefeal AiestUnm 
的 me Pa Sot one .Coen note Dew des bt 


ee 4 L 
er grown-ups ~ why now's the time to Moree Ie Gapsan oh eed 
ar r. 


图 6-12 ”Flipboard 的 模块 化 布局 是 其 体验 的 核心 


GD 参见 Charles Ying 的 Automating Layouts Bring Flipboard’s Magazine Style To 
Web And Windows。 
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另 一 方面 ， 集 成 化 的 设计 体系 适用 于 具有 以 下 特点 的 产品 : 


专 为 条 个 特定 目的 而 设计 

无 须 扩 张 或 改变 

需要 超越 边界 的 忆 术 创作 
几乎 没有 需要 共享 的 重复 部 件 
征 一 次 性 的 ， 不 太 可 能 复 用 


DD DU DOD 0 


富有 创意 的 会 议 网 站 ( 见 图 6-13)、 作 品 集 网 站 、 一 次 性 的 营 
销 活 动 幢 面 ， 痢 十 采 用 集成 化 方法 的 例子 。 


* NG A "EN 
2 LN 


a 
2 


图 6-13” ”Circles 会 议 是 一 个 面向 设计 师 等 创意 人 群 的 会 议 。 其 网 
站 设计 大 胆 ， 有 很 多 独特 的 模块 。 在 这 种 情况 下 ， 模 块 
化 的 方法 显然 是 不 值 当 的 


不 同 的 音乐 活动 在 Spotify 的 活动 页 面 上 的 设计 完全 不 同 ( 见 
图 6-14)。 


尽管 你 可 以 在 这 些 活动 页 面 中 发 现 一 些 品牌 样式 的 复 用 (如 形 
ee Ls 
到 。 对 于 主 产 品 模块 化 设计 体系 之 外 的 设计 ， 更 大 的 灵活 性 和 
更 多 的 创意 表达 是 很 有 意义 的 。2 


QD) Spotify 的 品牌 和 创意 团队 负责 管理 营销 活动 页 面 ， 他 们 有 一 个 简单 的 
设计 体系 ， 可 以 非常 灵活 地 组 合 品牌 样 式 。 正 是 基于 该 设计 体系 ， 他 们 
创作 了 一 系列 符合 Spotify 品牌 样式 的 活动 页 面 。 
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下 | 


Drunkin Love 
by Beyoncé 


6-14 Spotify 音乐 活动 页 面 的 一 些 示例 


6.2.3 权衡 利和 浆 ， 做 出 选择 


从 长 远 来 看 ， 模 块 化 的 方法 适应 性 更 剖 、 可 扩展 性 更 高 ， 也 更 
加 经 济 高 效 。 但 模块 化 也 有 一 些 缺 后 。 


首先 ， 比 起 旨 在 实现 特定 目标 的 一 次 性 解决 方案 ， 构 建 可 复 用 
的 模块 通 笛 耗 时 更 长 。 你 必须 基 虑 不 同 的 用 例 ， 并 规划 好 它们 
在 整个 系统 中 的 作用 。 为 了 降低 成 本 、 提 高 收益 ， 就 得 复 用 模 
块 ， 而 这 是 需要 时 间 的 。 有 的 团队 已 经 在 模块 化 上 面 投入 了 不 
少 资源 ， 却 述 述 看 不 到 回报 ， 这 让 他 们 很 难 判 断 这 笔 投 资 是 否 
合理 。 


其 次 ， 模 块 通 间 需要 做 到 十 分 通用 ， 以 应 对 各 种 不 同 的 情况 ， 
但 这 样 做 的 结 采 很 可 能 契 蝶 不 出 彩 的 通用 设计 ， 为 了 保证 效率 
而 牺牲 了 创造 性 与 故事 性 。 当 团队 选择 模块 化 方法 的 时 候 ， 他 
们 还 需要 找到 其 他 实现 创意 的 方法 一 一 独特 的 内 容 或 服务 、 踢 
烈 的 感情 色彩 、 对 感知 性 模式 的 有 效 使 用 ， 等 等 。 


再 次 ， 为 了 维护 模块 化 的 价值 ， 团 队 有 了 时 会 强行 复 用 模块 。 在 
FutureLearn， 我 们 束 出 现 过 为 追求 复 用 而 牺牲 页 面 效 果 的 情况 。 
为 了 避免 发 生 这 种 情况 ， 应 当 始 终 平衡 好 技术 的 效率 和 模块 化 
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第 6 章 


为 用 户 体 验 带 来 的 好 处 。 


最 后 ， 也 是 最 主要 的 一 个 挑战 ， 是 让 模块 之 则 无 颖 连接 。 既 然 
采用 模块 化 的 设计 ， 就 要 期 望 不 同 的 部 件 能 完美 地 匹配 、 相 互 
融合 。 但 有 时 人 们 无 法 做 到 将 模块 组 合成 一 个 运转 民 好 鸭 整 
体 。 更 糟糕 的 是 ， 即 使 模块 之 间 有 了 很 高 的 一 臻 性， 整体 体验 
的 一 致 性 依然 很 低 。 


为 了 避免 这 种 情况 ， 我 们 不 仅 要 关注 模块 本 身 ， 还 要 关注 它们 
之 间 的 联系 : 它们 之 间 的 关联 规则 、 它 们 的 相对 重要 性 〈 例 如 
视觉 响 度 )、 它 们 在 整个 用 户 轨迹 中 的 作用 、 它 们 在 整体 架构 
中 的 层级 关系 。 


集成 化 的 设计 是 针对 某 个 具体 的 目的 优化 而 成 的 ， 因 而 具有 较 

高 的 特定 性 。 它 们 往往 更 加 连贯 ， 整 体 性 也 更 好 ， 但 不 能 很 好 
地 扩展 。 集 成 化 设计 的 适应 性 和 可 复 用 性 很 差 ， 而 这 却 正 是 我 
们 做 Web 设计 所 需要 的 。 


模块 化 的 程度 可 以 随 着 时 间 变 化 。 一 开始 ， 你 们 的 设计 体系 可 
能 只 有 少量 共享 的 样式 和 原则 。 半 渐 地 ， 你 们 注意 到 更 多 重复 
的 模式 ， 于 是 设计 体系 模块 化 的 程度 逐渐 增加 。 这 是 合乎 产品 
发 展 正常 逻辑 的 。 


， 有 时候 情况 却 正好 相反 。 在 FutureLearn， 我 们 最 初 有 一 
es 但 后 来 我 们 意识 到 ， 在 冲击 力 
较 强 的 营销 页 面 上 使 用 可 复 用 的 模式 ， 会 限制 创造 力 的 发 挥 。 
随 着 FutureLearn 开始 开展 更 多 的 品牌 营销 活动 ， 我 们 做 出 了 一 
些 更 能 凸显 品牌 的 定制 化 设计 。 


6.3 组 织 : 集中 式 或 分 敌 式 


设计 体系 的 男 一 个 重要 方面 是 它 的 组 织 形式 。 
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6.3.1 集中 式 模 型 


在 集中 式 的 模型 中 ,设计 体系 的 规则 和 模式 主要 由 一 部 分 人 管 
理 。 这 意味 着 : 


D 他 们 定义 模式 和 规则 
口 他 们 对 设计 体系 的 决策 拥有 人 否决 权 
D 他 们 管理 模式 库 或 其 他 存放 模式 的 地 方 


这 种 结构 最 明显 的 优势 是 控制 权 。 由 于 有 人 对 设计 体系 负责 ， 
该 体系 就 会 锌 更 好 地 规划 、 维 护 和 发 展 。 这 种 结构 还 有 助 于 确 
保 创 意 方 问 是 聚焦 的 、 创 意 决 策 是 高 获 的 ， 因 为 创意 只 有 一 个 
来 源 。 这 可 能 也 是 设计 主导 的 公司 (如 Apple、Airbnb) 往往 
使 用 这 种 模型 的 原因 。 


6.3.2 ”分 散 陈 模型 


男 一 种 形式 是 分 敌 式 模型 。 在 这 种 情况 下 ， 每 个 使 用 设计 体系 
的 人 都 要 人 负 贡 维护 和 发 展 该 体系 。 


这 种 结构 为 个 体 提 供 了 目 主 权 ， 让 他 们 能 目 己 做 出 决策 。 这 种 
结构 通 第 更 敏捷 、 更 有 弹性 一 一 如 琳 一 个 人 漏 挥 了 杀 个 东西 ， 
男 一 个 人 可 以 快速 补充 。 在 这 种 结构 下 ， 设 计 知 识 和 创作 方 癌 
是 分 散 式 的 ， 并 没有 集中 在 少数 人 手 里 。™ 


这 是 TED 所 用 的 方法 ， 也 是 我 们 尝试 在 FutureLearn 建立 的 结 
构 。 对 于 像 FutureLearn 这 样 的 小 公司 来 说 ,设立 一 个 专门 负 贡 
设计 体系 的 团队 是 不 切实 际 的 。 所 有 参与 产品 打造 的 设计 师 和 
醒 问 开发 人 员 都 要 积极 地 为 设计 体系 做 页 献 。 而 且 ， 由 于 每 个 


J 正如 我 们 在 第 5 草 里 讨论 过 的 ， 这 种 方法 的 基础 是 拥有 密切 的 合作 和 共 
享 的 知识 ， 类 似 于 元 里 斯 托 弗 : 亚历山大 在 《建筑 的 永恒 之 道 》 中 提 到 
的 “模式 语言 ”的 概念 。 
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人 都 有 所 贡献， 所 以 以 这 种 方式 构建 设计 体系 并 不 需要 特别 长 
的 时 间 。 这 是 我 们 过 去 三 年 里 维护 模式 库 的 唯一 方法 。 


6.3.3 ”组织 挑战 
虽然 分 散 式 的 方法 适用 于 FutureLearn， 但 它 并 不 适合 所 有 团 
队 。 我 访谈 过 的 很 多 公司 在 沦 试 使 用 这 种 方法 时 都 遇 到 了 加 


题 。 一 开始 ， 大 家 都 很 有 热情 ， 但 由 于 没有 负责 人 ， 很 快 这 项 
工作 束 开 始 减 速 ， 其 至 完全 停止 。 


吹 洲 之 星 的 团队 并 不 大 ， 只 有 四 名 设计 师 、 四 名 产品 经 理 和 十 
名 前 端 开发 人 员 。 一 开始 ,分 散 式 的 方法 对 这 种 规模 的 团队 是 
最 为 实际 的 。 但 一 年 之 后 ， 他 们 仍然 难以 让 每 个 人 都 做 出 均等 
的 页 献 。 


我 们 布 望 看 到 每 个 人 都 做 出 一 点 贡献 ， 但 事与愿违 ， 大 量 的 贡 
献 来 自 于 少数 几 人 个人。 
一 一 Dan Jackson， 欧 洲 之 星 解决 方案 架构 师 


在 切换 到 集中 式 的 方法 后 ， 效 有 果 明 显 好 转 了 ( 见 图 6-15)。 
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THE PATTERN LIBRARY 
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和 You can browse the style guide using the navigation on the left. 
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Typography 

Design elements and components statuses 

Forms 

Carrier Logos Label Description 

List CEED Component is deprecated 
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Tables [wiP ) Work in progress 

Ui Components bd ED Ready to be used 


图 6-15 ”2017 年 欧洲 之 星 的 模式 库 
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完全 分 散 式 的 方法 似乎 在 特定 的 团队 文化 下 才能 发 挥 作 用 。 
同样 ， 如 果 缺 乏 某 种 团队 文化 ,严格 的 设计 体系 也 会 失败 。 
在 BBC ， 集 中 式 的 方法 似乎 无 法 驾驭 GEL”。BBC 的 一 名 技 
术 主 管 Ben Scott 在 接受 采访 时 提 到 ， 他 们 调研 过 集中 式 的 设 
计 体系 构建 方法 ， 他 们 认为 这 种 方式 并 不 合适 ， 因 为 每 个 产 
品 团 队 都 应 该 对 他 们 目 己 的 设计 有 独特 的 看 法 ， 所 以 分 散 式 
的 效果 更 好 。29 


6.3.4 权衡 利和 浆 ， 做 出 选择 


集中 式 的 方法 提供 了 控制 权 和 可 靠 性 ， 但 有 可 能 跟 不 上 团队 的 
市 玲 。 这 是 因为 贡 任 落 在 了 一 小 部 分 人 身上 ， 他 们 可 能 成 为 瓶 
颈 ， 从 而 影响 整个 产品 的 发 展 。” 此外， 对 于 规模 较 小 的 团队 
来 说 ， 让 一 个 人 脱离 具体 产品 ， 将 大 部 分 时 间 投 入 到 设计 体系 
的 工作 之 中 ， 也 是 不 切实 际 的 。 


分 敬 式 的 方法 提供 了 更 多 的 日 主 权 ， 让 整个 团队 虱 更 有 创造 
力 。 这 种 方式 更 敏捷 、 更 有 弹性 ， 因 为 它 不 依赖 于 一 小 部 分 
人 。 然 而 ， 要 让 这 种 工作 方法 可 持续 ， 并 坚定 创意 方 同 ， 依 然 
古 一 项 挑战 。 


就 像 设 计 体 系 规则 的 严格 程度 和 模块 化 程度 与 团队 规模 无 关 ， 
组 织 方 二 的 选择 也 不 依赖 于 团队 的 规模 。 小 公司 也 可 以 让 创意 
来 自 单一 来 源 (如 CEO 或 创意 总 监 )， 大 公司 也 可 以 选择 分 散 
式 的 组 织 方式 .。 


例如 ，Atlassian 拥有 2000 多 名 员工 ， 古 一 个 规模 较 大 的 公司 。 


Q@ BBC 是 英国 广播 公司 的 简称 。 一 一 译 者 注 

Q) GEL 是 “Global Experience Language”( 全 球体 验 语 言 ) 的 简称 ， 由 
BBC 推出 并 维护 。 译 者 注 

@) 出 自 2017 年 5 月 对 Ben Scott 的 非 正 式 采访 。 

由 在 Airbnb， 添 加 新 模块 的 过 程 可 能 需要 长 达 两 周 的 时 间 。 这 也 是 该 团 
队 正 在 努力 改进 的 事情 之 一 。 
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它 有 一 个 专门 的 团队 维护 设计 模式 ， 但 同时 也 有 一 个 开源 的 模 
型 ( 见 图 6-16) 提供 给 愿意 做 贡献 的 人 。 公 司 不 但 允许 每 个 人 
做 出 页 献 ， 而 且 还 积极 地 或 励 他 们 这 样 做 。 


Design, develop, and deliver 


UE EE Te mle ke [fe [ETTe le -mde) 
create straightforward and beautiful experiences. 


回 ernd 园 we 回 "oo 
Foundations, including personality, How color, type, and illustration are 
writing style, color, and type. used in marketing, 


Foundations, components, and pattens 
for building applications, 


四 Atlassian personality 四 Atlassian logos 加 Web component GUI 
A reflection of our culture, values, and 
promi 


lo custome r 以 
is on display in everything we build, 


WAtlassian 


加 oownioad our liustrations 圆 Auaskr 
图 6-16 ”Atlassian 的 设计 指南 建立 在 一 个 开源 模型 上 ， 每 个 人 都 
可 以 做 贡献 ， 不 过 这 些 贡 献 都 有 人 进行 管理 和 挑选 
我 们 不 仅 布 望 大 家 认同 载 们 的 设计 语言 ， 还 布 望 大 家 热爱 它 ， 
推动 它 的 发 展 。 


Jiirgen Spangl，Atlassian 公司 设计 负责 人 
BBC GEL 里 的 模式 是 “柏拉图 式 理想 ”的 版 本 ， 而 每 个 部 门 都 
有 自己 的 实现 。 
6.3.5 小结 


本 革 介 绍 了 不 同 团队 管理 设计 体系 的 方法 。 下 面 结合 前 面 介绍 
的 三 个 维度 ， 总 结 一 下 这 儿 个 团队 的 做 法 。 


Airbnb 的 设计 体系 古 严 格 的 、 模 块 化 的 ， 采 用 集中 式 的 组 织 形 
式 ( 见 图 6-17)。 它 运行 的 基础 是 严格 的 规范 和 流程 。 这 种 设 
计 体 系 具 有 很 高 的 确定 性 和 一 致 性 。 


设计 体系 的 参数 


Airbnb 


严格 宽松 
模块 化 集成 化 


图 6-17 从 三 个 维度 分 析 Airbnb 的 设计 体系 


TED 的 设计 体系 在 三 个 维度 上 几乎 都 位 于 相反 的 一 端 ( 见 
图 6-18)。 像 这 样 的 设计 体系 就 松散 得 多 ， 创 意 的 方 回 分 布 在 
团队 里 各 个 不 同 的 地 方 。 这 类 设计 体系 通常 允许 更 多 的 试验 和 
微调 ， 并 能 对 环境 做 出 反应 。 


TED 


严格 宽松 
和 
模块 化 集成 化 


6-18 ”从 三 个 维度 分 析 TED 的 设计 体系 


在 两 者 之 间 的 中 间 位 置 ， 有 像 FutureLearn 这 样 的 团队 〈 见 
图 6-19) 。 作 为 一 家 年 轻 且 不 断 发 展 的 公司 ，FutureLearn 的 设 
计 体 系 有 所 变化 。 一 开始 ， 它 是 集中 式 、 集 成 化 的 ， 淘 渐 地 ， 
它 开始 变 成 分 散 式 的 ， 也 更 加 模块 化 。 当 我 们 开始 关注 一 致 性 
上 时， 设计 体系 的 规则 也 会 随 着 时 间 的 推移 而 变 得 更 加 严格 。 
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6-19 ”从 三 个 维度 分 析 FutureLearn 的 设计 体系 
6.3.6 ”适合 你 的 设计 体系 


还 有 一 个 重要 的 方面 ， 束 是 团队 文化 。 它 总 是 不 可 避免 地 反映 
在 团队 构建 的 设计 体系 之 中 。 正 如 康 威 定律 ”所 述 : 


设计 体系 的 结构 必定 反映 了 设计 该 体系 的 组 织 的 沟通 结构 。 


Sipgate 的 团队 现在 正在 重 构 他 们 的 模式 库 。 有 趣 的 不 古 他 们 
将 模型 从 分 散 式 切换 成 了 集中 式 ， 而 是 为 了 完成 这 一 转换 ， 他 
们 不 得 不 先 癌 公司 展示 完全 目 治 产生 了 什么 样 的 效 末 。 起 初 ， 
Sipgate 这 种 淋 尚 自由、 充满 热情 的 团队 无 法 想象 他 们 的 设计 由 
其 他 人 “控制 。 但 是 ， 即 使 是 像 他 们 这 样 推 党 目 洽 文化 的 团 
队 ， 也 能 认识 到 集中 式 的 方法 是 确保 其 设计 体系 连 员 统一 所 需 
要 的 。 


为 了 顺利 完成 转化 ， 该 团队 对 设计 过 程 和 协作 方式 做 了 一 些 
调整 。 他 们 现在 更 加 强调 共享 设计 方法 ， 而 不 古 维 护 设计 模 
去 文档 。 对 他 们 来 说 ， 这 不 仅 是 方 癌 的 转变 ， 也 十 一 种 文化 
有 改变: 


Q) 康 威 定律 源 于 1967 年 计算 机 科学 家 兼程 序 员 Melvin Conway 所 做 的 观察 。 
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适合 你 们 的 设计 体系 不 一 定 适 合 其 他 团队 ， 在 一 个 团队 管用 的 
体系 可 能 不 适用 于 另 一 个 团队 。 有 时 我 们 看 到 Airbnb 团队 成 功 
了 ， 束 询 蛙 构建 一 个 跟 他 们 一 样 的 体系 ， 但 实际 上 每 种 方法 都 
有 人 缺 点。 适合 你 的 设计 体系 应 该 是 你 能 掌控 所 有 缺点 的 体系 。 


每 个 有 效 的 设计 体系 的 核心 痢 不 是 工具 ， 而 是 能 针对 特定 团 
队 、 特 定 产品 打造 优质 设计 和 良好 用 户 体验 的 知识 。 只 要 乔 清 
楚 了 这 些 知识 ， 其 他 的 一 切 邦 将 随 之 而 来 。 
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规划 与 实践 


本 章 将 探讨 如 何在 组 织 中 为 建立 设计 体系 寻求 支持 ， 以 及 如 何 
规划 相关 的 工作 。 


如 何 让 团队 开始 更 加 系统 地 思 芳 设计 工作 呢 ? 只 有 当 他 们 发 现 
当前 工作 流程 有 问题 时 ， 他 们 才 会 这 样 做 。 设 计 师 如 末 发 现 目 
己 总 是 在 解决 同样 的 问题 ， 或 者 其 设计 未 被 正确 地 实现 ， 就 会 
变 得 诅 起 。 开 发 人 员 则 厌倦 了 为 每 一 个 组 件 单 独 定 制 祥 式 ， 以 
及 处 理 混乱 的 代码 库 。 他 们 都 在 痛 雷 地 赶 工 ， 以 期 满足 日 益 增 
长 的 产品 需求 。 如 来 没有 共享 的 设计 语言 和 实践 ， 协 作 就 会 变 
得 很 困难 。 


有 人 开始 做 出 改进 一 一 为 按钮 制定 标准 、 建 立 主 Sketch 文件 、 
创建 向 单 的 组 件 床 ， 等 等 。 其 他 人 开始 注意 到 这 些 工 作 的 好 
处 ， 并 加 入 其 中 。 团 队 开 始 为 更 多 的 模式 制定 标准 、 统 一 设计 
用 语 、 构 建新 的 工具 和 流程 。 经 过 一 系列 试 错 之 后 ， 他 们 会 
看 到 系统 功能 的 改进 。 这 些 初步 举措 古 极 其 珍 叶 的 。 但 要 做 出 
真正 的 改变 ， 将 设计 体系 工作 作为 副业 项 目 来 做 是 不 够 的 。 你 
需要 获得 广泛 的 支持 一 一 不 仅 要 有 同事 的 帮助 ， 还 要 有 高 层 的 
文 持 。 


7.1 ”获得 高 层 的 支持 


歼 得 高 层 有 的 文 持 与 资源 的 投入 并 韭 多 事 。 有 的 团队 一 上 来 束 开 
始 收 集 严 品 里 视 贰 不 一 致 的 现象 。 一 张 表 现 按 钮 样式 不 一 致 的 
图 片 有 可 能 让 人 人 信服， 但 并 非 总 古 能 让 CEO 或 其 他 上 级 看 到 
你 提议 的 价值 。 
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想 要 获得 业务 的 支持 ， 你 需要 证 明 ， 有 效 的 设计 体系 将 有 助 于 
更 快 地 实现 业务 目标 ， 并 降低 成 本 。 也 就 是 说 ， 你 需要 准备 一 
个 商业 案例 。 


有 时 候 ， 使 用 对 方 熟 悉 的 语言 征 有 帮助 的 。 如 条“ 全 面 的 设计 
体系 ”这 个 概念 听 起 来 过 于 宽泛 和 抽象 ， 那 么 不 妨 改 成 “模块 
化 的 界面 "。 模 块 化 有 很 多 验证 过 的 好 处 ， 我 们 在 第 6 章 中 对 此 
有 过 讨论 。 只 要 这 个 方 同 是 正确 的 ， 这 些 好 处 就 可 以 成 为 你 的 
团队 和 产品 的 优势 。 下 面 看 一 些 用 于 说 服 他 人 的 语言 的 例子 。 


7.1.1 在 设计 和 构建 模块 时 能 节省 时 间 


显然 ， 复 用 现 有 元 素 比 从 头 开 始 构建 要 更 快 一 些 。 你 甚至 可 以 
大 致 计算 出 可 以 市 省 多 少时 间 。 在 FutureLearn， 第 一 次 构建 一 
个 相对 人 简单 的 自 定义 组 件 大 约 需 要 三 个 小 时 。 使 用 模块 化 的 方 
式 构建 同样 的 组 件 (过 程 包括 确定 结构 、 保 证 适用 性 、 起 个 好 
名 称 、 将 其 添加 到 模式 库 ) 可 能 需要 两 倍 的 上 时间。 但 是 再 次 使 
用 同样 的 组 件 时 ， 则 几乎 不 花 时 间 。 从 长 远 来 看 ， 如 果 总 是 关 
注 可 复 用 性 ， 就 能 节省 大 量 的 时 间 。 


即便 是 看 似 简单 的 按钮 元 素 ， 也 需要 人 花 大 量 时 间 和 精力 进行 设 
计 和 构建 。 为 了 让 高 层 了 解 复 用 组 件 的 价值 ， 设 计 体系 专家 、 
Modular Web Design 一 书 的 作者 Nathan Curtis 讲 过 一 个 关于 按 
钮 的 复杂 性 的 故事 。 他 用 几 张 幻灯 版 告诉 观众 ， 是 如 何 花 挥 数 
十 万 美元 来 设计 和 构建 按钮 的 。 


如 果 你 的 企业 有 25 个 团队 都 在 制作 按钮 ,那么 你 的 企业 需要 
花 100 万 美元 才能 得 到 好 的 按钮 。 


Nathan Curtis 


用 数据 表示 效率 低下 所 带 来 的 成 本 ， 通 常 是 区 
有 效 的 方式 。 


ft 
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7.1.2 在 做 整 站 修改 时 能 节省 时 间 


对 于 一 个 腔 肿 且 低 效 的 系统 来 说 ， 即 便 是 最 小 的 改动 也 相当 烦 
开 ， 很 花 时 间 。REtsy 的 Marco Suarez 在 他 的 文章 Designed for 
Growth 中 描述 了 技术 债 和 设计 债 是 如 何 拖 慢 团队 节 委 的 。 他 分 
享 了 Jessica Harllee 在 Etsy 网 站 上 更 新 按钮 样式 时 使 用 di 企 工 
具 2 的 情况 ( 见 图 7-1)。 删 除 的 代码 用 红色 表示 ， 新 增 的 代码 
用 绿色 表示 。 显 然 ， 这 个 侧 单 的 视觉 变化 和 素 涉 的 代码 太 多 了 。 


7-1 更 新 Etsy 网 站 上 按钮 样式 时 使 用 diff 工具 的 情况 删除 的 
代码 用 红色 表示 ， 新 增 的 代码 用 绿色 表示 ) 


做 这 样 的 改动 不 仅 很 伦 时 间 ， 而 且 有 时 必须 在 不 同 的 地 方 做 同 


样 的 修改 。 与 之 相反 的 是 ， 可 复 用 的 模式 更 新 时 所 有 使 用 该 模 
式 的 地 方 都 会 日 动 更 新 。 这 会 让 整 站 冰 围 的 更 新 更 快 地 完成 。 


从 长 远 来 看 ， 模 块 用 得 越 多 就 越 好 用 。 对 于 同一 模块 ， 不 同 
的 团队 想到 不 同 的 用 例 ， 并 给 出 不 同 的 解决 方案 以 满足 他 们 
各 目的 需求 。 通 过 改进 个 别 组 件 ， 整 个 设计 体系 将 变 得 更 加 
强大 且 匈 于 维护 。 团 队 成 员 花 在 问题 修复 和 代码 清理 上 的 时 
间 越 少 ， 他 们 就 有 越 多 的 时 间 处 理 那 些 能 为 用 户 和 业务 带 来 
价值 的 事情 。 


QD di 企 是 用 于 比较 两 个 文件 之 间 差 异 的 工具 ， 它 通常 用 于 比较 同一 文件 的 
不 同 版 本 的 差异 。 一 一 译 者 注 
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7.1.3 ”能 让 产品 更 快 上 线 


如 末 你 去 一 家 和 蛋糕 店 ， 购 买 现成 的 重 迷 和 购买 定制 的 蛋糕 的 价 
格 是 完全 不 一 样 的 。 在 FutureLearn， 产 品 经 理 很 清楚 根据 现 有 
模块 开发 和 构建 全 新 模块 分 别 需 要 多 长 时 间 。 使 用 模式 库 构 建 
页 面 通 稼 只 需要 几 天 时 间 ， 做 新 的 设计 则 可 能 需要 几 周 时 间 。 
因此 ， 如 采 我 们 想 验 证 一 个 想法 ， 或 者 试验 新 的 功能 ， 我 们 有 
时 会 使 用 现 有 模块 以 期 快速 上 线 。 这 样 做 可 能 并 不 完美 ， 但 它 
为 团队 腾 出 了 测试 、 收 集 反 馈 和 改进 方案 的 时 间 。 


Sipgate 的 Tobias Ritterbach 指出 ， 使 用 他 们 新 模式 库 的 团队 在 推 
出 新 功能 时 ， 比 不 使 用 模式 库 的 团队 快 很 多 倍 ， 是 如 何 做 到 的 : 


由 于 有 了 针对 我 们 网 站 做 的 模式 库 ， 我 们 构建 页 面 的 速度 比 没 
有 模式 库 的 其 他 团队 快 10 一 20 倍 。” 
Tobias Ritterbach，Sipgate 公司 用 户 体验 负责 人 


这 些 和 案例 表明 ， 使 用 模块 化 的 设计 体系 能 让 团队 更 快 地 完成 
原型 设计 、 发 布 功能 ， 这 样 做 能 更 好 地 满足 不 断 增长 的 业务 


7.1.4 其 他 好 处 


在 为 设计 体系 准备 议案 的 时 候 ， 成 功 的 关键 古 证 明 低 效 市 来 的 
成 本 并 将 其 量化 。 不 过 ， 构 建设 计 体 系 还 有 其 他 一 些 重 要 的 好 
处 ， 这 些 好 处 在 某 些 组 织 中 可 能 会 得 到 重视 。 


1. 品牌 统一 


在 一 个 公司 里 面 ， 不 同 产 品 〈《 有 时 甚至 是 同一 产品 的 不 同 部 分 ) 
看 起 来 就 像 是 出 目 不 同 品牌 的 情况 并 不 少见 。 让 不 断 发 展 的 产 
品 或 产品 线 统一 到 同一 个 品牌 之 下 ， 需 要 有 效 的 设计 体系 。 
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2. 视 完 一 致 性 


设计 古 一 种 语言 形式 一 一 我 们 通过 设计 传达 产品 的 心智 模型 。 
一 致 的 视 沉 表现 会 让 产品 给 入 熟悉 、 可 预测 的 感觉 ， 能 帮 用 户 
更 快 地 理解 界面 、 减 少 认 知 负 和 从 。 人 简单 地 说 ， 一 致 性 能 让 界面 
更 加 直观 。 


实现 一 致 性 就 像 在 界面 中 做 出 一 个 个 小 的 承诺 例如， 粉红 色 
的 按钮 总 是 代表 某 种 操作 ,“ 取 消 ” 按 钮 总 古 在 “提交 ”按钮 
的 前 面 )。 当 用 户 对 将 要 发 生 的 事情 有 把 握 的 时 候 ， 他 们 就 能 
信任 产品 。 一 致 性 有 助 于 建立 这 种 信任 。 


3. 团队 协作 


共 台 的 语言 是 协作 的 基础 ， 而 这 正定 有 效 的 设计 体系 所 提供 
的 一 一 它 为 人 们 提供 了 共同 创造 事物 的 工具 和 流程 。 有 了 设计 
体系 ， 人 们 便 可 以 在 他 人 工作 的 基础 之 上 开展 工作 ， 而 不 十 从 
头 开 始 构 建 同样 的 东西 。 在 Airbnb， 哪 怕 只 是 简单 地 将 组 件 归 
集 到 一 个 地 方 ， 束 能 看 到 整个 团队 设计 师 生 产 力 的 提高 。 


我 们 用 一 个 主 Sketch 文件 来 归 集 组 件 。 一 两 个 星期 之 后 ， 我 们 
开始 看 到 模式 库 为 设计 选 代 工 作 带 来 的 生产 力 的 巨大 飞跃 。 


Karri Saarinen，Airbnb 设计 负责 人 


起 要 获得 支持 ， 还 需要 提供 一 些 基 于 团队 目 身 情况 的 案例 。 设 
计 师 Laura Elizabeth 在 一 次 谈话 中 提 到 ， 使 用 测试 项 目 来 证 明 
设计 体系 的 好 处 也 是 一 种 行 忆 有效 的 办 法 : 


在 一 个 小 型 测试 项 目 中 尝试 构建 设计 体系 ， 能 让 你 看 到 它 对 你 
的 工作 产生 了 多 大 影响 、 帮 你 节省 了 多 少时 间 。” 


风 Karri Saarinen 的 文章 Creating the Airbnb Design System。 


中 参 
@) 参见 Laura Elizabeth 的 Selling Design Systems。 
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并 非 每 个 团队 都 能 立刻 成 立 一 个 专门 负责 设计 体系 的 小 组 ， 或 
者 立刻 禹 定 一 份 正 却 的 计划 ， 但 哪 介 只 征 找 几 个 人 突击 一 下 ， 
也 可 以 成 为 通 向 最 终 目 标的 有 效 起 点 。 第 一 步 的 成 功 古 未 来 获 
得 更 多 文 持 的 基础 。 


7.2 从 哪里 开始 


如 第 6 革 所 述 ， 每 个 团队 的 需求 不 一 样 ， 适 用 于 他 们 的 策略 也 
不 一 样 。 不 过 ， 下面 是 一 些 对 大 多 数 团 队 都 适用 的 建议 。 


7.2.1 束 目 标 达 成 一 致 


你 希望 通过 这 项 工作 取得 哪些 主要 成 采 ? 拥有 明确 的 目标 能 叉 
团队 指明 方向 ， 提 供 动力 。 这 对 他 们 组 织 排 期 和 平衡 优先 级 也 
古 有 帮助 的 。 目 标 应 当 拆 解 为 具体 的 、 可 测量 的 步 又 。 


如 霖 你 和 我 一 样 将 设计 体系 拆 解 为 模式 和 共 豆 的 实践 ， 你 的 目 
标 就 会 反映 这 一 理念 。 例 如 ， 一 个 目标 是 针对 界面 的 ， 另 一 个 
则 古 针 对 团队 运转 方式 的 。 


1. 将 再 面 系统 化 


D 定义 设计 指导 原则 

口 定义 可 复 用 的 设计 模式 并 将 其 标准 化 

口 建立 模式 库 

D 建立 主 设计 文件 ， 收 集 最 新 的 模式 

D 重 构 代 码 和 前 端 架 构 ， 以 支持 模块 化 的 方法 


2. 建立 共享 的 流程 和 治理 


口 通过 沟通 、 协 作 、 结 对 子 、 培 训 等 方法 ， 建 立 知识 共 至 的 
深 程 
D 在 整个 公司 推广 模式 库 ， 吉 励 大 家 使 用 
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D 面 癌 所 有 部 门 推 广 共 部 的 设计 语言 
D 在 入 职 培训 中 引入 对 设计 体系 的 介绍 


目标 可 以 拆 解 为 小 的 任务 和 故事 。 为 了 规划 不 同 阶段 的 目标 ， 
不 妨 试 着 为 你 们 的 设计 体系 画 一 个 简单 的 路 线 图 。 可 以 使 用 像 
Trello 之 类 的 软件 ， 也 可 以 直接 在 白板 上 粘贴 便签 。 重 要 的 是 ， 
路 线 图 能 让 团队 成 员 全 面 了 解 各 个 事项 的 优先 级 ， 并 看 到 设计 
体系 将 如 何 演变 。” 


在 FutureLearn， 我 们 还 将 设计 体系 的 故事 整合 到 了 产品 的 主 路 
线 图 里 。 这 有 助 于 让 团队 的 其 他 成 员 了 解 我 们 在 做 的 工作 ， 并 
平衡 好 这 项 工作 与 其 他 工作 的 优先 级 。 


拥有 明确 的 目标 和 里 程 碑 也 有 助 于 管理 公司 其 他 部 门 的 预期 。 
设计 体系 是 一 项 长 期 投资 一 一 其 价值 随 着 时 间 的 推移 而 逐渐 增 
加 。 和 人 们 希望 看 到 浙 进 的 、 稳 定 的 发 展 ， 而 不 古 大 起 大 活 的 变化 。 


7.2.2 ”将 成 果 公 开 


据 我 观察 ， 那 些 愿意 公开 一 些 设计 体系 工作 成 采 的 团队 ， 往 
往 比 那些 把 一 切 都 保密 的 团队 进步 得 更 快 。 欧 洲 之 星 的 Dan 
Jackson 在 接受 采访 时 提 到 了 尽早 将 样式 指南 公开 (哪怕 还 不 完 
美 ) 的 重要 性 。 看 到 其 他 人 从 自己 的 工作 成 果 中 获得 帮助 ， 能 
为 他 们 提供 额外 的 动力 。 


我 希望 我 们 的 样式 指南 成 为 我 们 引 以 为 荣 的 公开 产品 。 人 们 可 
能 正在 查看 这 份 指 南 ， 将 其 作为 资源 使 用 ， 这 让 我 们 感觉 我 们 
必须 持续 地 更 新 它 。 

一 一 Dan Jackson， 欧 洲 之 星 解 决 方案 架构 师 


一 些 团队 在 设计 体系 发 展 的 过 程 中 还 会 撰写 一 些 相关 的 博客 文 
草 。 如 采 不 仅 能 讲述 你 们 的 成 功 之 处 ， 还 能 把 你 们 犯 下 的 错 


GD 参见 Nathan Curtis 的 文章 Roadmaps for Desiegn Systems。 
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误 、 遭 遇 的 困难 和 改正 的 方法 写 出 来 ， 这 项 工作 就 会 尤其 有 
用 。 以 开放 、 诚 实 的 心态 记录 工作 上 的 进展 ， 是 让 团队 不 断 学 
习 和 保持 工作 积极 性 的 有 效 方 式 。 


这 样 做 也 让 硕 后 的 工作 变 得 公开 透明 了。 我 们 定期 发 布 一 些 关 
于 FutureLearn 设计 体系 的 观点 和 讨论 ， 这 也 有 助 于 让 更 多 的 人 
了 解 我 们 所 做 工作 的 价值 。 


7.2.3 创造 知识 共享 的 文化 


正如 我 们 在 第 6 草 Sipgate 的 例子 里 所 看 到 的 ， 一 个 团队 如 果 
有 更 新 及 时 的 模式 库 ， 但 没有 有 人 效 有 的 跨 团 队 协 作 方 式 ， 模 式 库 
的 价值 束 会 大 打折 扣 。 想 让 团队 以 更 加 系统 的 方式 思 沽 问题 ， 
需要 建立 起 强大 的 知识 共享 体系 。 我 们 在 第 5 草 “ 共 享 设计 语 
言 ” 中 讨论 过 这 一 主题 的 内 容 。 


口 建立 专门 的 Slack 频道 ， 让 大 家 在 这 里 定义 设计 模式 并 为 其 
命名 ， 讨 论 与 设计 体系 有 关 的 话题 。 

口 创建 一 个 模式 揪 , 让 设计 体系 的 工作 对 公司 其 他 人 公开 透明 ， 
并 或 励 更 多 的 人 加 入 这 项 工作 。 

口 将 设计 体系 的 知识 放 入 入 职 培 训 的 内 容 。 

组 织 例会 ， 同 步 每 个 人 的 工作 。 

D 不 仅 要 鼓励 小 组 内 各 成 员 之 间 的 协作 ， 还 要 鼓励 跨 小 组 、 跨 
部 门 的 协作 ， 尤 其 要 鼓励 对 设计 体系 有 更 多 了解 的 人 同 大 家 
一 起 工作 ， 这 样 他 们 就 有 机 会 将 他 们 的 知识 和 热情 市 给 那些 
对 设计 体系 不 其 了 解 的 人 。 

口 组 织 研 讨 会 和 培训 , 将 设计 体系 的 最 新 进展 介绍 给 整个 团队 。 
在 FutureLearn， 制 作 注 示 文稿 最 有 效 的 方法 是 使 用 “问题 一 
解决 方案 ”的 格式 。 首 先 把 当前 问题 呈现 给 对 方 ， 然 后 解释 
我 们 提出 的 改变 将 如 何 推动 回 题 的 解决 。 例 如 :“ 使 用 目前 
的 排版 方式 ， 会 导致 大 屏 医 上 的 文字 太 小 ， 而 小 屏 攻 上 的 文 
字 又 太 大 ; 阅读 体验 受到 了 有 影响; 无 法 判断 该 用 哪 一 级 标题 ， 
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而 且 样 式 太 多 ， 产 生 了 不 一 致 的 情况 。 下 和 面 ， 请 看 新 的 排版 
体系 是 如 何 解 决 这 些 回 题 交 …… 

D Vitaly Friedman 和 他 的 团队 用 了 一 种 非常 规 的 方法 : 把 界面 
上 的 组 件 放 到 特定 的 日 子 里 。 于 是 ,他 们 有 了 旋转 木马 日 " 
“灯箱 日 ”” “手风琴 日 ””, 等 等 。 他 们 甚至 将 组 件 及 其 变 体 打 
印 出 来 ， 配 上 前 问 代 码 和 相应 样式 ， 发 给 团队 里 的 每 一 个 人 。 


我 们 把 它们 贴 到 厨房 水 槽 劳 边 ， 贴 到 卫生 间 里 面 。 一 个 月 以 后 ， 
每 个 人 都 记 住 了 所 有 组 件 的 名 称 ， 包 括 清洁 人 员 在 内 | ” 


Vitaly Friedman，Smashing 杂志 主编 


7.2.4 提升 团队 士气 


设计 体系 的 工作 是 一 个 长 期 的 过 程 。 在 某 些 时 期 ， 你 的 团队 可 
能 看 不 到 所 做 工作 的 回报 。 


你 很 难 立 即 获得 个 人 的 满足 感 ， 但 当 看 到 其 他 人 在 他 们 的 工作 
中 使 用 你 所 创建 的 模块 ， 或 者 有 人 发 表 评 论 称 你 的 工作 对 他 们 
有 很 大 的 帮助 时 ， 你 就 会 感觉 自己 的 付出 有 了 回报 。 

Jusna Begum，FutureLearn 前 痛 开 发 人 员 


在 这 个 过 程 中 ， 可 以 采取 一 些 措施 来 提升 团队 的 士气 。 


为 了 避免 产生 总 也 做 不 完 的 任务 列表 ， 可 以 先 一 次 性 完成 大 部 
分 工作 ， 再 把 剩余 的 任务 当 作 持 续 性 的 工作 。 在 Atlassian， 最 
彻 的 工作 就 是 由 两 三 个 人 在 短 时 间 内 完成 的 。 主 导 Atlassian 设 
计 指 南 (ADG) 初始 工作 的 产品 设计 师 Matt Bond 在 他 写 的 一 


QD“ 旋 转 木 马 ”(Carousel) 在 Web 开发 中 指 的 是 轮 播 图 效果 。 一 一 译 者 注 

(“灯箱 ”(Lightbox) 在 Web 开发 中 指 的 是 一 种 将 背景 暗 化 的 弹 窗 样 
了 译 者 注 

(3) “手风琴”(Accordion) 在 Web 开发 中 指 的 是 一 种 像 手 风琴 一 样 可 折 鲜 
展开 的 分 组 样式 。 译 者 注 
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篇 博客 文章 中 提 到 ， 采 用 这 种 两 阶段 的 方法 ， 可 以 让 团队 快速 
完成 初始 阶段 的 工作 ， 并 对 余下 的 工作 保持 动力 。 


我 们 的 工作 很 高 产 ， 我 们 在 很 短 的 时 间 内 就 完成 了 80% 的 新 
模式 。 我 们 在 接 下 来 的 一 周 左 右 里 ， 只 花 了 少量 时 间 来 优化 模 
式 ， 并 将 使 用 指南 和 相关 代码 并 入 ADG.” 吕 


对 于 某 些 工 作 ， 如 开展 界面 评审 、 建 立 模式 库 等 ， 让 整个 团 
队 《或 来 自 多 个 团队 的 代表 ) 参与 其 中 是 很 有 用 的 ， 至 少 在 初 
始 阶 段 要 这 样 做 。 这 样 做 可 以 让 大 家 产生 一 种 主人 傅 意 识 。 如 
果 由 于 有 其 他 优先 级 更 高 的 事项 而 无 法 做 到 这 一 后 ， 可 以 先 让 
一 个 小 组 做 好 基础 工作 ， 再 根据 需要 让 其 他 人 参与 进来 。 在 
FutureLearn， 我 们 先 让 两 个 人 (一 名 设计 师 和 一 名 前 端 开 发 人 
员 ) 突击 性 地 为 设计 体系 开 了 个 涉 ， 当 我 们 弄 清楚 了 应 该 如 何 
开展 这 项 工作 之 后 ， 才 根据 需要 将 其 他 人 拉 了 进来 。 


用 这 种 方式 安排 任务 ， 能 以 最 低 的 成 本 将 收益 最 大 化 。 在 
FutureLearn， 我 们 曾 立 下 目标 ， 让 所 有 的 组 件 都 能 够 实际 使 用 。 
这 意味 着 网 站 上 和 模 却 库 里 的 模块 代码 应 该 是 一 致 拟 。 但 要 做 
到 这 一 后 ， 就 需要 对 每 个 模块 进行 重 构 。 于 古 ， 我 们 一 边 重 构 
它们 ， 一 边 将 它们 逐个 添加 到 模式 库 里 。 这 是 一 个 缓慢 而 痛 雷 
的 过 程 ， 团 队 开 始 失 去 动力 。 


后 来 ， 我 们 意识 到 ， 如 末 我 们 只 用 屏幕 截图 而 非 代 码 ， 就 能 迅 
速 添加 完 所 有 的 模式 ， 这 样 模式 库 束 能 更 快 地 产生 价值 。 这 让 
团队 成 员 可 以 立即 开始 在 工作 中 参考 模式 库 的 内 容 。 在 接 下 来 
的 儿 个 月 里 ,我 们 重 构 了 这 些 模式 ， 逐 潮 用 实际 的 模块 去 替换 
截图 。 如 果 没 有 采用 上 面 的 做 法 ， 我 们 可 能 需要 一 年 时 间 才 能 
整理 完 所 有 的 模式 。 


(GD 参见 Matt Bond 的 How we made the Atlassian Desien Guidelines。 
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7.3 ”关于 设计 体系 实践 的 思考 


我 们 在 FutureLearn 早期 开展 的 一 个 模块 化 的 试验 ( 见 图 7-2)， 
就 是 重新 设计 主页 。 一 名 视觉 设计 师 创 建 了 模块 化 切片 ， 然 后 
我 们 开 了 一 个 研讨 会 ， 试 图 将 这 些 切片 组 织 成 完整 的 页 面 。 这 
就 是 我 们 当时 所 认为 的 模块 化 设计 过 程 (或 许 很 天 真 )。 


图 7-2 ”我们 早期 做 的 模块 化 试验 


通过 这 一 过 程 ， 我 们 形成 了 三 个 设计 ， 它 们 也 最 终 构成 了 功能 


完整 的 原型 。 尽 管 这 是 一 次 有 用 的 实践 ， 但 结 采 并 不 是 真 正 模 
块 化 的 。 


口 模块 没有 明确 的 目的 ， 它 们 之 间 的 差异 主要 是 表现 层 的 。 
口 我 们 没有 定义 它们 ， 也 没有 为 它们 命名 。 

口 我 们 没有 考虑 应 该 如 何 复 用 它们 。 

口 它们 在 整个 设计 体系 中 的 作用 疝 不 明确 。 


这 些 原型 从 未 投入 生产 ,但 正 是 这 样 的 试验 让 我 们 开始 努力 将 
设计 过 程 变 得 更 加 系统 化 。 通 过 多 种 答 试 ， 我 们 意识 到 ， 模 块 
化 的 设计 不 仅仅 古 切 制 界面 ， 再 将 各 个 部 分 重新 组 合 在 一 起 。 
如 采 你 的 团队 还 不 熟悉 模块 化 的 思考 方式 ， 那 么 不 妨 先 在 一 些 


规划 与 实践 


副业 项 目 或 在 产品 的 杂 些 局 部 进行 试验 ， 探 索 模块 化 方法 的 在 
正 含义 。 


正和 莹 试 了 多 种 不 同 的 方法 之 后 ， 我 们 对 界面 的 系统 化 有 了 一 套 
更 有 条 理 的 实践 体系 。 


在 第 8 昔 和 第 9 草 ， 我 们 将 详细 地 描述 这 套 实 践 方法 。 人 向 单 地 
(1) 确定 关键 行为 和 美学 特征 

(2) 对 现 有 元 素 进行 评审 

(3) 定义 模式 


功能 性 模式 和 感知 性 模式 的 处 理 方式 略 有 不 同 。 对 于 功能 性 模 
式 ， 我 们 需要 重点 关注 用 户 行为 ， 关 注 单 个 模块 的 定义 和 命名 。 
对 于 感知 性 模式 ， 我 们 将 更 多 地 将 其 当 作 一 个 整体 来 看 待 ， 关 
注 感 完 和 视 先 效 末 ， 以 及 如 何 让 它们 协调 一 致 的 一 般 原 则 。 


对 于 这 些 工作 事项 ， 顺 序 并 不 重要 。 有 的 团队 认为 应 当先 构建 
基础 项 目 ， 比 如 排版 ， 有 的 团队 则 从 核心 的 功能 性 模块 开始 着 
手 。 同 时 构建 功能 性 模式 和 感知 性 模式 也 是 可 以 有 的 。 


无 论 采 用 哪 种 方式 ， 我 们 部 要 先兆 虐 全局， 再 将 界面 拆 解 为 小 
的 部 分 。 这 样 ， 我 们 就 不 会 只 关注 单独 的 模块 ， 还 会 沽 虑 它们 
如 何 协调 一 致 ， 以 及 如 何 帮 有 我 们 实现 产品 的 目的 。 
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功能 性 棍 陈 的 系统 化 


本 章 将 展示 如 何 从 产品 的 目的 入 手 ， 将 功能 性 模式 系统 化 的 方法 。 


我 住 的 小 镇 上 有 一 家 小 书店 。 当 走 进去 的 时 候 ， 你 会 看 到 几 个 
能 够 看 到 图 书 封面 的 书架 。 其 中 ， 有 一 些 书 的 封面 上 贴 着 手写 
的 便 竹 ， 便 竹 上 古 读者 的 评论 。 即 便 你 不 知道 自己 想 读 什 么 
书 ， 也 有 可 能 被 这 种 有 趣 的 东西 吸引 。 一 旦 你 被 吸 3| 了 ， 束 可 
以 到 旁边 安静 的 地 方 ， 坐 在 沙发 上 ， 边 哆 咖啡 ， 边 看 书 。 你 可 
以 洋 书 ， 也 可 以 不 严 ， 不 必 有 任何 压力 。 这 家 店 的 精神 十 发 现 
和 阅读 ， 而 销售 则 是 次 要 的 。 它 的 模式 一 一 便 特 、 安 静 的 地 方 、 
沙发 和 咖啡 昌 一 一 印证 了 这 一 点 。 


类 似 地 ， 数 字 产 品 也 让 用 户 能 够 完成 某 些 特定 的 行为 ， 或 鼓励 
某 些 特定 的 行为 。 想 想 Slack 的 协作 方式 是 如 何 区 别 于 其 他 邮 
件 应 用 和 聊天 应 用 的 。 想 想 Tinder 是 如 何 通过 其 独特 的 推荐 交 
互 建 立 起 一 种 随意 、 不 带 承 诺 的 关系 的 。 哪 怕 是 围绕 相似 目标 
和 需求 打造 的 产品 ， 也 可 以 或 励 完 全 不 同 的 行为 。 


这 束 是 为 什么 对 行为 的 思考 有 助 于 将 模式 与 产品 的 设计 草图 和 
精神 联系 在 一 起 。” 


设计 肢 图 可 以 以 无 数 种 方式 至 现 一 一 模式 不 一 定 古 视觉 上 的 。 
模式 可 以 通过 物理 的 对 象 《如 书店 里 的 东西 ) 表现 出 来 ， 也 可 
以 用 语音 恋 出 来 。 对 行为 进行 说 明 古 一 种 更 加 面 问 未 来 的 定义 
模式 的 方式 ， 因 为 行为 是 独立 于 平台 的 。 


QD 设计 模式 也 可 以 用 于 创建 不 端的 行为 ， 如 “支持 ”用 户 的 注意 力 ， 让 用 
户 将 时 间 和 人 金钱 花 在 让 他 们 后 悔 的 事情 上 。 留 意 用 户 的 行为 ， 可 以 帮 了 我 
们 确保 用 户 的 兴趣 始终 是 反映 设计 和 初 囊 的 。 


功能 性 模式 的 系统 化 


8.1 目的 导 回 的 清音 


界面 清单 是 对 界面 进行 系统 化 的 流行 方式 一 一 和 完 收 集 各 种 UI 
元 素 的 屏幕 截图 ， 再 根据 外 观 的 相似 度 对 它们 进行 分 组 。 


这 个 方法 虽然 很 简单 ， 但 可 以 通过 不 同 的 方式 去 完成 。 有 的 界 
和 面 清 单 关 注 的 古 视 完 一 致 性 ， 例 如 确保 所 有 按钮 看 起 来 部 是 一 
样 的 ， 所 有 菜单 都 是 一 致 的 ， 等 等 。 但 本 章 所 描述 的 过 程 ， 其 
主要 目标 不 是 解决 视觉 一 致 性 的 问题 ， 而 是 定义 最 核心 的 设计 
模式 ， 并 在 团队 中 形成 关于 如 何在 整个 系统 中 使 用 这 些 模式 的 
共识 。 通 过 这 个 过 程 ， 你 的 团队 将 了 解 到 需要 更 加 关注 哪些 地 
方 。 做 完 这 些 后 ， 通 前 会 得 到 一 份 需要 进行 标准 化 的 元 系 的 列 
表 ， 附 带 一 些 关 于 如 何 定义 这 些 模式 的 草图 和 想法 。 


虽然 可 视 化 的 清单 通常 按照 外 观 和 类 型 (如 按钮 、 标 签 页 控件 
等 ) 对 元 素 进行 分 组 ， 但 在 下 面 的 练习 中 ， 你 可 能 会 看 到 同一 
个 组 里 有 看 起 来 不 一 样 的 内 容 。 因 为 ， 我 们 是 按 目 的 〈 即 体现 
设计 意图 的 行为 ) 对 它们 进行 分 组 的 〈 见 图 8-1)。 
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8-1 ”在 以 目的 为 导向 的 清单 中 ， 同 一 个 分 组 下 的 元 素 可 能 看 起 来 
很 不 一 样 ， 因 为 它们 古 按 目的 而 不 古 按 视觉 样式 进行 分 组 的 
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这 意味 着 ， 我 们 首先 要 做 的 不 契 让 所 有 按钮 看 起 来 一 致 ， 而 古 
试 着 了 解 条 种 类 型 的 按钮 该 在 什么 时 候 使 用 ， 什 么 时 候 该 用 链 
接 而 不 古 按 钮 ， 什 么 时 候 完 全 不 该 使 用 按钮 而 十 直接 让 对 象 变 
得 可 上 反击。 当然 ， 在 这 样 做 的 过 程 中 ， 我 们 也 会 提高 视 沉 一致 
性 ， 但 这 并 不 古 重 点 。 


8.2 准备 工作 


8.2.1 安排 时 间 


对 于 这 项 工作 ， 最 有 效 的 时 间 是 在 基础 用 户 体 验 工 作 (包括 用 
户 研究 、 内 容 策略 、 信 息 架 构 及 设计 方 癌 的 确定 ) 做 完 之 后 。 
如 琳 设 计 有 根本 性 错误 或 可 用 性 问题 ， 处 理 这 些 事情 就 会 分 散 
注意 力 ， 影 啊 效 率 。 出 于 同样 的 原因 ， 如 末 你 们 的 界面 即将 进 
行 重大 改版 ， 最 好 也 要 先 明确 新 的 设计 方 癌 。 


8.2.2 ”选择 人 员 


不 同 的 观 氮 能 让 你 更 为 客观 ， 并 兼顾 更 多 的 用 例 。 设 计 师 和 
前 端 开 发 人 员 的 参与 是 至 关 重 要 的 ， 理 想 情 况 下 还 应 该 包括 
后 冰 开 发 人 员 、 内 容 管理 人 员 和 产品 经 理 。 理 想 的 小 组 规模 
为 4 一 8 人 。 如 采 需 要 更 多 的 人 ， 可 以 芳 虑 先 在 不 同 的 部 门 
找到 少数 的 代表 进行 急 步 工作 ， 再 在 后 续 的 会 议 上 ,听取 更 
多 人 的 看 法 。 


8.2.3 打印 再 面 

找 出 你 的 产品 中 最 重要 、 最 不 可 或 缺 的 界面 和 用 户 流 程 。 通 
第 ，10 一 12 个 界面 就 蚁 了 ， 有 时 其 至 更 少 。 它 们 可 以 是 设计 
原型 ， 也 可 以 是 现 有 界面 的 屏幕 截图 。 


功能 性 模 陈 的 系统 化 


假设 你 在 参与 一 个 公共 图 书馆 网 站 的 工作 。 该 网 站 的 目的 古 扩 
展 实体 图 书馆 的 体验 ， 让 读者 可 以 提前 预订 图 书 ， 从 而 避免 在 
图 书馆 排队 等 竺 取 书 。 


为 实现 上 述 目 的 ， 关 键 的 界面 包含 这 些 功能 : 查找 特定 书籍 、 
发 现 新 书 、 预 订 资 料 、 下 载 和 资料。 当然， 这 个 图 书馆 网 站 还 有 很 
多 其 他 功能 : 活动 与 展览 、 会 员 、 收 藏 ， 等 每。 尽管 我 们 应 当 留 
意 这 些 功能 ， 但 通 弟 我 们 不 知 要 一 开始 就 兆 虑 到 所 有 的 界面 。 


将 每 个 关键 界面 打印 两 份 。 第 一 份 按照 典型 用 户 轨 迹 的 顺序 贴 
在 增 上 ， 第 二 份 则 将 用 于 剪 切 模式 并 对 其 进行 分 组 。 在 整个 实 
践 过 程 中 ， 你 将 不 停 地 在 整体 体系 和 单个 模式 之 间 转 换 。 打 印 
两 份 会 让 你 既 能 专 广 于 细 攻 ， 又 能 看 到 更 大 的 图 景 ， 不 会 在 剪 
切 后 ， 瑟 记 模 式 来 产 之 处 的 衣 景 。 


为 了 完成 这 项 工作 ， 你 还 需要 准备 好 药丸 、 记 号 笔 、 便 利 贴 ， 
以 及 充足 的 墙 面 区 域 和 果 面 空间 。 


8.3 ”确定 关键 行为 


首先 需要 确定 用 户 轨 迹 每 个 阶段 中 的 关键 用 户 需 求 和 行为 。 对 
于 只 有 少量 界面 的 小 型 应 用 ， 和 考察 的 对 象征 各 个 界面 ， 黄 至 古 
一 个 界面 上 的 各 种 状态 。 对 于 较 大 的 产品 ， 最 好 先 按照 用 户 轨 
迹 的 不 同 阶段 对 页 面 进行 分 组 。 


回 到 公共 图 书馆 网 站 的 例子 上 ， 可 以 根据 以 下 行为 对 页 面 进行 
分 组 ( 见 图 8-2)。 


口 发 现 : 激发 用 户 发 现 他 们 感 兴趣 的 图 书 。 拿 书店 作 类 比 ， 这 
个 区 域 就 像 是 店员 精 选 或 新 书 推荐 货架 。 如 条 用 户 不 是 一 上 
来 就 知道 要 找 什么 ， 他 们 就 有 可 能 从 这 些 展示 的 内 容 中 受到 
局 发 。 
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D 目录 : 查找 特定 图 书 。 通 过 目录 搜索 就 像 古 问 一 名 工作 人 员 


DQ 


求助 。 

想 读 清单 ， 让 用 户 查 看 和 管理 他 们 暂 存 的 图 书 。 在 实体 图 书 
馆 中 ， 你 可 能 会 将 一 些 书 放 在 一 边 ， 以 便 稍 后 决定 留 下 哪 
些 书 。0 


DisCOVERY 二 CATALOGUE 六 WISH LIST 雪 归 


二 一 -- 一 一 一 - 
日 Eb 


> 


图 8-2 ”这些 核心 界面 是 按照 它们 在 整个 用 户 轨 迹 中 支持 的 行为 进 


行 分 组 的 


需要 留心 一 个 页 面 内 包含 多 个 相互 冲突 的 行为 的 情况 ， 例 如 ， 
一 个 页 面 同 时 激发 用 户 查 看 新 书 、 下 载 资 料 、 订 阅 通讯 、 查 看 
最 新 活动 。 即 使 一 个 界面 包含 多 种 行为 ， 最 重要 的 操作 也 应 该 
古 清 晰 的 ， 而 且 行为 之 间 不 会 相互 冲突 。 在 处 理 多 个 行为 的 时 
候 ， 首 先 要 关注 核心 用 户 轨迹 ， 确 定 最 重要 的 行为 。 在 这 个 例 
子 中 ， 了 节 重 要 的 行为 就 是 发 现 图 书 、 查 询 图 书 和 预订 图 书 。 


(D 如 果 有 过 多 的 页 面 支持 同一 种 行为 ， 很 可 能 是 信息 架构 还 不 够 好 。 
(2 示例 页 面 仅 作 说 明之 用 。 


功能 性 模 陈 的 系统 化 


8.3.1 措辞 是 一 项 基础 工作 


我 们 所 用 的 词汇 也 很 重要 ， 它 们 会 彩 啊 我 们 的 思 芳 方式 。 有 几 
个 月 ， 我 在 FutureLearn 工作 的 团队 将 “留存 ”作为 一 项 指标 ， 
其 关注 点 是 让 更 多 的 人 在 课程 开始 之 后 继续 学 习 。 对 留存 进行 
设计 很 难 。 我 们 也 不 清楚 留存 究竟 给 我 们 的 用 户 带 来 了 什么 好 
处 。 如 琳 把 该 指标 换 作 “参与 ”， 可 能 就 会 有 不 同 的 设计 结 
“参与 ”的 关注 点 是 学 习 的 质量 和 满意 度 ， 而 不 古 在 网 站 上 停 
留 的 时 间 。( 有 人 可 能 在 FutureLearn 上 花 了 半 个 小 时 学 习 ， 却 
没有 得 到 想 要 的 东西 ， 这 并 不 能 算 作成 功 。) 


无 论 是 从 用 户 的 角度 看 ， 还 是 从 公司 的 角度 看 ， 行 为 都 应 该 是 

意义 的 。” 图 书 的 “促销 ”只 对 图 书馆 有 利 ， 但 “发 现 ” 新 
书 对 读者 也 有 价值 。 选 择 更 好 的 语言 会 影响 对 图 书 的 挑选 ， 以 
及 它们 的 陈列 方式 。 


8.3.2 ”将 行为 分 解 为 操作 


定义 了 高 级 别 的 行为 之 后 ， 可 以 将 它们 分 解 为 更 具体 的 操作 
( 见 图 8-3)。 将 这 些 操作 写 在 每 个 界面 旁边 。 例 如 ,支持 “发 
纲 图 书 ” 这 一 行为 的 操作 包括 : 


N= 


通过 扫 视 寻找 有 总 思 或 有 趣 的 图 书 
在 推荐 图 书 列 表 中 挑选 
调整 列表 的 显示 方式 

碍 看 和 了 解 一 本 书 
挑选 可 能 喜欢 的 图 书 

暂 存 和 预订 图 书 


DD DU DO DoD 


J 成 功 的 公司 都 能 将 用 户 的 目标 和 业务 的 目标 结合 在 一 起 。 如 果 你 真 的 很 
难 将 两 者 结合 在 一 起 ， 那 么 你 的 产品 有 可 能 遇 到 了 设计 体系 无 法 解决 的 
更 深层 次 的 问题 。 
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图 8-3 具体 操作 附着 于 更 高 层次 的 行为 


你 可 能 会 注意 到 某 些 操作 在 整个 界面 中 重复 地 出 现 。 不 过 ， 代 
表 同 一 操作 的 元 素 并 非 总 是 一 致 的 。 有 时 ， 我 们 通过 点 击 标签 
页 选择 未 类 图 书 ， 有 了 时， 我 们 又 通过 菜单 进行 选择 。 为 了 解决 
这 些 不 一 致 的 情况 ， 我 们 需要 对 现 有 的 元 素 进 行 评 审 。 


8.4 按 目 的 对 现 有 元 素 进 行 分 组 


挨个 对 每 一 个 行为 做 这 样 的 处 理 : 查看 所 有 页 面 ， 寻 找 支持 这 
个 行为 的 元 素 。 例 如 ， 对 于 “查看 图 书 ， 可 能 在 促销 页 面 、 
目录 搜索 结 来 页 和 想 读 清单 页 都 有 不 同 的 项 目 用 到 这 个 行为 。 


使 用 第 二 组 打印 出 来 的 屏幕 截图 ， 剪 切 相关 元 素 。 把 它们 放 进 
不 同 的 组 ， 并 为 它们 贴 上 这 样 的 标 众 :“ 碍 看 图 书 “ 介 选 列 

”等 〈( 见 图 8-4)。 在 定义 模式 时 需要 用 到 这 些 分 组 。 同 一 组 
的 元 素 应 该 具有 相同 的 粒度 。 因 此 ，“ 图 书 列表 ”模块 和 “ 预 
订 ”按钮 不 会 出 现在 同一 个 组 里 面 。 


功能 性 模式 的 系统 化 


图 8-4 ”对 元 素 进 行 分 组 ， 下 面 定义 模式 时 需要 用 到 


8.5 ”定义 模式 

元 素 完成 分 组 后 ， 就 可 以 对 每 一 组 项 目 分 别 进行 处 理 了 。 它 们 
应 该 合并 成 一 种 模式 还 是 分 拆 成 不 同 的 模式 ?通常 ， 这 要 结合 
具体 情况 来 分 析 。 不 过 ， 有 两 种 技术 对 此 特别 有 用 ， 一 种 是 通 
过 具体 性 尺度 来 衡量 模式 ， 另 一 种 是 绘制 模式 的 内 容 结 构 。 


8.5.1 具体 性 尺度 


模式 可 以 定义 得 具体 一 些 ， 也 可 以 定义 得 通用 一 些 ( 见 图 8-5)。 
假设 我 们 要 在 图 书馆 网 站 上 显示 活动 和 展 顺 。 如 和 朱 我 们 将 它们 
定义 为 两 个 单独 的 模式 ， 每 个 模 却 都 会 比较 具体 。 如 采 我 们 
将 它们 统一 为 一 种 称 作 “内 容 块 ”的 东西 ， 就 会 让 模式 更 加 
通用 。 


131 


66 活动 ” 

6 A 内 容 块 ” 
展 哆 

具体 通用 


8-5 具体 性 尺度 


虽然 这 看 起 来 是 一 个 简单 的 概念 ， 但 决定 具体 性 的 程度 是 模块 
化 设计 中 最 棘手 的 问题 之 一 。 有 具体 的 东西 越 多 ， 可 复 用 性 束 越 
凌 。 相 反 ， 为 了 让 茶 些 东 西 更 具 可 复 用 性 ， 就 需要 设计 得 更 加 
通用 。 如 末 有 具体 的 部 件 太 多 ， 设计 体系 就 会 变 得 难以 维护 ， 难 
以 保持 一 致 。 但 如 条 通用 的 模块 大多， 又 会 寻 致 设计 普通 。 像 
很 多 事情 一 样 ， 定义 模式 没有 标准 的 做 法 ， 一切 邦 取决 于 我 们 
想 要 实现 的 目标 。 


我 们 是 否 希 望 网 站 的 访问 者 对 活动 和 展览 两 个 模块 的 感觉 是 不 
一 样 的 ? 有 没有 哪些 关于 活动 的 东西 是 跟 展览 的 设计 有 冲突 
的 ? 如 末 上 述 两 个 问题 都 是 肯定 的 回答 ， 我 们 就 应 该 考虑 将 它 
们 分 开 。 举 例如 下 。 


口 对 于 展 贤 模块 的 设计 ， 可 以 在 中 间 位 置 放置 一 张 亏 术 图 片 。 
由 于 展 贤 都 是 很 独特 的 ， 因 此 可 以 为 它们 提供 与 展 贤 内 容 相 
结合 的 定制 设计 ， 束 像 海 报 一 样 。 日 期 的 字号 较 小 并 放 在 角 
沙 ， 这 样 不 会 分 散 用 户 的 注意 力 。 

口 活动 的 设计 则 相对 简单 ， 可 以 突出 活动 日 期 和 活动 标志 。 


如 末 没 有 理由 将 这 两 种 类 型 分 开 ， 就 应 该 将 它们 统一 为 一 种 模 
式 ， 这 正 是 模式 库 要 做 的 事情 。 这 样 做 会 让 模式 更 为 通用 ， 因 
为 它 必 须 适 用 于 这 两 种 情况 。 这 也 意味 着 我 们 对 话 动 所 做 的 每 
一 项 改动 都 会 同时 影 虽 展 咒 。 一 致 性 将 更 容 多 实现， 不 过 起 以 
辆 牲 一 定 的 灵活 性 为 代价 的 。 


功能 性 模 陈 的 系统 化 


8.5.2 ”内 容 结构 

另 一 个 我 认为 很 有 用 的 工具 就 是 绘制 模式 的 内 容 结构 。 我 们 在 
第 4 章 介 绍 功能 性 模式 时 简单 地 提 到 了 这 个 方法 。 下 面 我 们 先 
回顾 一 下 。 


(1) 列 出 让 模块 有 效 的 核心 内 容 。 这 个 模块 如 霖 没有 这 个 图 片 
还 能 正 稍 运行 吗 ? 即 ， 这 个 图 片 对 这 个 模块 的 目的 十 至 天 
重要 的 吗 ? 标 答 页 总 是 必需 的 吗 ? 把 可 选 的 元 素 标 出 来 。 

(2) 确定 元 素 的 层次 结构 ， 并 决定 如 何 对 它们 进行 分 组 。 这 个 
图 标 是 关键 信息 的 一 部 分 ， 还 古 图 片 的 一 部 分 ? 

(3) 将 结构 以 至 图 的 形式 绘制 出 来 。 模 式 的 外 观 可 以 有 无 数 种 
至 现形 式 ， 而 草图 则 有 助 于 找到 节 佳 的 设计 。 


可 以 合并 为 一 个 模式 的 元 素 通 第 具有 相同 的 的 层 结 构 。 如 末 你 
发 现在 不 影响 元 素 目的 的 情况 下 ， 很 难 将 多 个 元 系统 一 成 一 个 
结构 ， 就 表明 它们 不 应 该 合并 。 


有 时 ， 受 所 处 环境 和 设计 和 意图 的 影响 ， 结 构 相 似 的 元 素 可 能 在 
外 观 上 或 交互 上 差异 很 大 。 在 这 种 情况 下 ， 我 们 可 以 创建 变 
体 。 变 体 是 同一 模式 的 修改 版 本 。 


回 到 图 书馆 网 站 的 例子 。 假 设 你 最 终 在 “查看 图 书 ” 组 中 找到 
了 下 面 这 些 项 目 ( 见 图 8-6)。 
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图 8-6 ”对 图 书 项 目 进行 分 组 : 定义 模式 时 需要 用 到 


你 可 能 看 出 来 了 ，A、B 两 项 具有 相同 的 目的 ， 即 它们 都 出 现 
在 列表 中 ， 让 用 户 查 看 图 书 并 了 解 图 书信 息 。 实 际 上 ， 它 们 也 
有 相同 的 内 容 结 构 ( 见 图 8-7) : 


Boork ITEM 


虹 太 人 Have you seen my dragon?/ 。 Thisitem is in 


二 Steve 王 ow bor bg 
Son actions: View Book Bag 


本 CREDENTIALS 


AUTHOR Light, Stev 
BOE 2014 
eat 96th Street Chil a 's Picture Book 
SE 0 ee i plus Ey re EE 
ACTIONS 
THUMBNALIL © 
Have you seen my dragon? / Steve Steve. 05-26-2016 
ADD. INFO (OPTIONAL) to on Bi 


图 8-7 图 书 项 目的 内 容 结 构 


B 项 里 面 缺 少 操作 按钮 和 缩 略 图 ， 但 我 们 看 不 出 需要 这 样 做 的 
理由 。 在 扫 视 图 书 列表 时 ， 纵 略图 很 有 用 ， 你 应 该 可 以 直接 预 
订 而 不 必 离 开 想 读 清 青 单 页 面 。 


而 D、E 两 项 跟 它 们 是 不 一 样 的 。 这 两 项 的 主要 目的 是 展示 值 
得 关注 的 新 书 ， 所 供 选 书 灵感 。 如 琳 我 们 画 出 它们 的 结构 ， 可 
能 是 这 样 的 〈 见 图 8-8) : 
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朋 COVER_ 
CREDENTIALS 
[ AUTHOR 
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图 8-8 图 书展 示 的 内 容 结 构 


你 可 以 通过 设想 发 生 改变 的 情形 来 验证 上 述 结构 。 同 问 自己 : 
如 采 我 改变 这 个 模块 ， 我 希望 其 他 模块 也 以 同样 的 方式 改变 
吗 ? 例如 ， 封面 和 缩 略 图 看 起 来 很 相似 ， 但 我 们 也 有 
可 能 将 它们 视 为 完全 不 同 的 东西 。 也 许 “ 发 现 ” 页 面 的 设计 有 
一 些 独特 的 交互 和 动画 ， 以 引起 用 户 对 图 书 的 注意 ， 而 我 们 不 
锅 望 将 相同 的 效果 用 于 列表 中 的 标准 图 书 项 目 。 


下 面 我 们 来 看 看 C 项 。 它 跟 A、B 两 项 很 像 ， 有 着 相似 的 内 容 
结构 。 但 由 于 它 位 于 网 站 的 发 现 和 图 书展 示 区 域 ， 因 此 它 会 显得 
更 加 突出 。 它 也 比 列表 中 的 图 书 项 目 更 加 详细 ， 提 供 了 更 多 的 
书信 息 。 因 此 ， 可 以 将 该 元 素 作 为 图 书 项 目的 变 体 ( 见 图 8-9)。 
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图 8-9 图 书 项 目的 变 体 
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既然 有 变 体 ， 通 第 就 会 有 默认 模式 。 默 认 模 式 拥 有 核心 样式 .， 
而 变 体 则 包含 其 他 的 样式 。 重 要 的 是 要 和 弄 清 楚 哪 些 特性 是 模式 
的 核心 部 分 ， 哪 些 是 变 体 特有 的。 和 弄 清楚 了 这 些 ， 你 就 可 以 预 
济 一 个 模式 的 变化 将 如 何 影 响 基 他 的 模式 .。 


在 上 面 的 例子 里 ， 核 心 默认 模式 中 的 茶 些 元 素 在 不 同 的 地 方 有 
不 同 的 样式 ， 从 而 让 模式 给 人 的 感 沉 不同。 这些 元 素 包 括 : 


D 大 标题 
D 大 缩 略 图 
口 非 贡 宽松 的 布局 


我 们 知道 ， 如 末 我 们 修改 大 标题 的 样式 ， 不 会 影 啊 列 表 里 的 图 
书 项 目的 样式 ， 但 如 末 我 们 修改 作者 样式 ， 这 项 修改 会 同时 作 
用 于 这 两 个 地 方 。 


通过 查看 内 容 结 构 和 样式 之 间 的 关系 ， 能 找到 更 多 可 复 用 的 模 
式 。 试 着 把 所 有 的 模式 看 一 遍 ， 比 对 基础 内 容 〈《 书 名 ) 和 样 
式 名 称 (“大 标题 “小 标题 “小 的 元 数据 ”)。 类 似 地 ， 这 样 
也 能 看 到 字符 数 或 图 像 大 小 的 变化 。 如 琳 各 种 尺寸 部 标准 化 
了 ， 模 式 就 可 以 适用 于 更 多 的 内 容 类 型 。 


8.5.3 命名 


我 们 在 第 5 草 讨 论 共 享 的 设计 语言 时 曾 提 到 ， 命 名 会 影响 模式 
的 使 用 效果 。 精 心 挑 选 的 名 称 可 以 成 为 构建 设计 体系 的 强大 
工具 。 


为 模式 命名 时 ， 要 试 着 寻找 能 反映 模式 具体 化 程度 的 名 称 。 如 条 
还 不 人 确定， 就 先 从 比较 具体 的 名 称 开 始 。 例 如 ， 在 FutureLearn， 
我 们 一 直 将 课程 的 学 习 过 程 视 为 一 种 特殊 的 体验 ， 因 此 有 一 套 
专门 用 于 课程 区 域 的 模块 ( 见 图 8-10)。 


功能 性 模 陈 的 系统 化 


Research and Story Structure 


lanning your story through research and structure 


8-10 ”FutureLearn 课程 概览 区 域 的 标签 页 


在 这 种 情况 下 ,使 用 “课程 标签 页 ”这 一 名 称 古 合适 的 一 一 我 
们 不 想 在 其 他 任何 地 方 复 用 这 个 组 件 。 该 名 称 也 向 团队 的 其 他 
成 员 表 明 ， 该 组 件 不 是 通用 的 标签 页 ， 而 是 专属 课程 区 域 的 。 
后 来 ， 我 们 决定 在 其 他 地 方 也 使 用 这 个 模块 ， 便 将 其 名 称 改 为 
“页 面 标签 页 ”"。 新 的 名 称 更 加 通用 ， 并 向 团 队 表明 ， 现 在 该 组 
件 可 以 用 在 其 他 区 域 了 。 


有 时 ， 模 块 的 命名 是 在 前 端 工作 中 完成 的 ， 但 命名 也 是 用 户 
体验 工作 的 一 部 分 ， 因 此 应 该 在 模块 的 设计 阶段 由 两 方 和 面 人 员 
协作 完成 。 为 模块 命名 时 ， 需 要 券 虑 内 容 的 类 型 ， 但 命名 不 
应 该 仅 基 于 内 容 。 有 效 的 名 称 能 指导 使 用 ， 并 减少 模式 重复 的 
可 能 性 。 


8.6 ”在 更 小 的 维度 上 重复 目的 导向 的 清单 
过 程 

在 对 部 件 分 组 完成 后 ， 请 将 目的 导向 的 清单 过 程 应 用 到 其 他 的 

元 素 上 。 通 常 ， 这 个 过 程 会 涉及 多 个 进程 ， 一 个 进程 用 于 讨论 

宏观 的 用 户 行为 ， 其 他 的 则 用 于 考察 更 小 粒度 的 模式 ， 例 如 : 
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D 按钮 和 链接 

口 标题 

口 列表 

口 标签 页 和 菜单 

口 单 选 按钮 、 切 换 按钮 和 复 选 框 
有 反馈 消息 

导航 

图 像 

图 标 


D DO OoD 


如 有 未 有 一 些 元 素 具 有 相似 的 目的 ， 就 需要 将 它们 放 在 一 起 芳 
虑 ， 而 不 十 分 开 处 理 。 按 钮 和 链接 有 何不 同 ? 标 人 铭 页 式 的 导航 
和 列表 式 的 业 单 有 何不 同 ?” 下 拉 列 表 和 一 组 按钮 有 何不 同 ? 复 
选 框 与 切换 按钮 有 何不 同 ? 了 


以 下 是 在 对 链接 和 按钮 进行 评审 的 时 候 需要 考 谍 的 后 。 


8.6.1 操作 的 一 致 性 
按钮 和 链接 


从 传统 上 讲 ， 在 Web 开发 领域 ， 链 接 和 按钮 是 不 一 样 的 。 链 接 
用 于 将 用 户 从 当前 页 面 导向 其 他 地 方 ， 按 钮 则 用 于 提交 某 项 操 
作 ， 以 及 切换 界面 中 的 某 些 内 容 。” 但 实际 上 ， 仅 仅 依靠 这 项 
标准 ， 仍 然 很 难 做 出 设计 决策 。 


假设 有 一 个 图 书 项 目 ， 上 面市 有 “查看 图 书 ” 的 按钮 。 单 击 该 


GO 你 可 以 找到 一 些 通用 指南 和 最 佳 实践 ， 例 如 Bil Scott 和 Theresa Neil 的 
《Web 界面 设计 》、Jenifer Tidwell 的 《界面 设计 模式 》 都 是 这 方面 的 好 书 ， 
但 有 些 东西 是 你 们 特有 的 。 此 外 ， 还 有 一 些 东 西 对 团队 里 的 某 些 人 来 说 
是 第 识 ， 但 其 他 人 并 不 熟悉 ， 那 么 这 些 东西 仍然 值得 用 语言 表达 出 来 。 

@) 参见 Marcy Sutton 的 文章 Links vs. Buttons in Modern Web Applications 和 
Dennis Lambree 的 文章 Proper Use of Buttons and Links。 
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按钮 ， 可 以 将 模块 展开 ， 显 示 关 于 该 书 的 更 多 信息 。 如 来 现在 
币 望 打开 新 页 面 来 至 现 这 些 信 息 ， 征 合意 味 着 这 项 操作 应 该 以 
链接 的 形式 至 现 呢 ? 


同 很 多 其 他 事情 一 样 ， 混 请 往往 源 于 语言 。 有 些 人 (通常 是 开 
发 人 员 ) 将 按钮 定义 为 提交 数据 的 触发 元 素 。 因 此 ， 他 们 不 会 
将 标记 为 链接 的 按钮 视 为 真正 的 按钮 。 其 他 一 些 人 (通常 是 设 
计 师 ) 则 认为 按钮 不 过 十 菜 种 独立 的 行动 召唤 。 他 们 会 将 “ 查 
看 图 书 ” 称 为 按钮 ， 哪 怕 它 被 标记 为 链接 。 


对 些 ， 不 同 的 设计 体系 有 不 同 的 处 理 方式 。 在 IBM 的 Carbon 
设计 体系 中 ， 链 接 是 导航 元 素 ( 见 图 8-11)， 按 钮 只 能 用 于 对 
数据 有 改动 的 用 户 操作 。 而 在 Shopify 的 Polaris 设计 体系 中 ， 
按钮 可 以 用 来 表现 包括 导航 在 内 的 任何 类 型 的 操作 ， 链 接 既 能 
用 于 和 通信 式 操 作 ， 也 能 用 于 导航 。 

链接 主要 用 作 导 航 元 素 。 链 接 也 可 用 于 控制 数据 是 否 显示 或 如 


何 显 示 (如 “查看 更 多 “显示 全 部 )。 如 有 果 用 户 的 操作 会 对 
数据 做 出 改动 ， 则 应 使 用 按钮 。 


-加 
3 
元 


| 


View full render 


1 <a href="#" class="bx——link">Link</a> 前 


8-11 IBM Carbon 设计 体系 中 链接 的 用 法 


对 我 而 言 ， 最 重要 的 是 对 目的 的 一 致 表述 。 用 户 〈 既 包括 直接 
以 视觉 方式 访问 界面 的 用 户 ， 也 包括 使 用 屏幕 阅读 人 帮 的 用 户 ) 
需要 对 结 有 末 有 预期 。 如 有 按钮 总 征用 于 提交 数据 ， 却 在 一 种 情 
况 下 表现 得 像 链接 ， 用 户 就 会 感到 困惑 。 但 是 ， 如 采 在 整个 界 
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00 
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面 中 都 将 链接 做 成 按钮 的 样式 ， 例 如 独立 的 行动 召唤 按钮 ， 这 
也 是 合理 的 。 


为 了 避免 混淆 和 误 用 这 些 重要 元 素 ， 一 定 要 对 它们 的 定义 达 
成 共识 。 在 你 的 团队 里 ， 按钮 和 “链接 共同 的 含义 是 什 
么 它们 的 基本 用 法 古 什么 ? 


Heydon Pickering 在 《包容 性 Web 设计 》 中 提 到 了 一 种 非常 向 
单 有 效 的 区 分 方法 。 这 种 方法 是 区 分 链接 和 行动 召唤 (call to 
action，CTA) ， 而 不 是 区 分 链接 和 按钮 ( 见 图 8-12)。 一 个 重要 
的 独立 操作 可 能 表现 为 一 个 按钮 的 样式 ， 但 其 标记 既 有 可 能 是 
按钮 ， 也 有 可 能 是 链接 ， 这 取决 于 其 交互 形式 。 但 这 个 独立 操 
作 是 链接 还 是 按钮 的 问题 ， 应 理解 为 它 属于 哪 种 CTA 变 体 的 问 
题 一 一 它 首 先是 一 个 CTA。 


CTA- 按钮 CTA- 链接 链接 
Be sure to bring proof of identity in order 
Search Next > 


8-12 ”对 按钮 和 链接 进行 分 类 的 示例 。 此 外 ， 两 种 CTA 可 以 在 
样式 上 有 细微 的 差别 ， 指 示 交 互 上 的 差异 


如 果 操 作 的 过 程 发 生 在 当前 页 面 上 ， 就 使 用 CTA 按钮 。 如 果 操 作 
会 将 用 户 带 到 其 他 页 面 ， 就 使 用 CTA 链接 。 还 需要 区 分 标准 链接 
和 CTA 链接 ， 标 准 链接 代表 的 是 通 癌 其 他 内 容 的 入 口 ， 通 常 舱 在 
内 容 里 面 ， 如 正文 、 标 题 、 图 像 等 内 容 里 都 可 以 岁入 标 淮 链接 。 


这 种 区 分 方式 不 仅 满足 了 突出 显示 CTA 的 设计 要 求 ， 还 有 助 于 
保持 代码 简洁 易 用 。 
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8.6.2 ”视觉 层次 


大 多 数 界面 都 有 主要 按钮 和 辅助 性 按钮 。 但 “主要 ”究竟 意味 
着 什么 呢 ?” 它 表示 的 古 整 个 界面 里 最 重要 有 的 操作 ， 还 古 特定 界 
面 里 最 重要 的 操作 ? 例如 ， 预订 图 书 古 图 书馆 网 站 里 的 重 
要 操作 ， 那 么 “预订 图 书 ，” 按钮 古人 否 应 该 总 是 使 用 东 种 特别 的 
样式 呢 ? 


在 Marvel 的 设计 体系 中 ,“ 局 平 ”按钮 用 于 “必要 的 或 强制 的 
操作 ”,“ 幽 灵 ” 按 钮 ”用 于 “可 选 的 、 低 频 的 或 微小 的 操作 ”。 
如 有 果 两 个 “ 届 平 ”按钮 对 应 的 操作 是 同等 重要 的 ， 那 么 这 两 个 
按钮 可 以 并 排 在 一 起 。 我 喜欢 这 种 划分 方式 ， 因 为 它 人 简单 、 清 
上 晰 ， 并 考虑 到 了 按钮 的 用 途 。 


但 是 对 于 拥有 大 量 按钮 的 更 复杂 的 界面 ， 很 难 芳 虑 到 如 此 具体 
的 功能 。 这 时 就 需要 考查 不 同 按钮 在 一 起 使 用 时 的 相互 关系 
了 。 在 Atlassian 的 设计 体系 和 Shopify 的 Polaris 设计 体系 〈 见 
图 8-13) 中 ， 主 要 按钮 用 来 表示 “所 有 体验 中 最 重要 的 操作 ， 
因此 每 个 界面 只 能 出 现 一 次 主要 按钮 。 


plain View shipping settings 
outline Add product 
basic Add product 


图 8-13 ”Polaris 中 的 一 些 按钮 类 型 ( 按 突出 程度 由 低 疝 高 排列 ) 


@D 费 灵 按钮 指 的 是 痛 景 透明 、 带 外 框 线 的 按 乌 。 一 译 者 注 
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在 这 些 设计 体系 中 ， 都 有 一 个 “基本 ”按钮 ， 用 于 默认 情况 。 
只 有 出 现 “ 一 个 按钮 需要 表现 得 较 重 要 或 较 不 重要 ”的 情况 ， 
才 会 萎 虑 用 其 他 样式 。 不 妨 这 样 思 萎 : 如 来 界面 症 通过 语音 读 
出 来 的 ， 那 么 首先 会 读 出 哪个 操作 ?哪些 操作 会 读 得 更 大 声 ? 
哪些 操作 会 用 不 同 的 语调 读 ? 


8.6.3 ”特例 


忆 会 有 一 些 特殊 情况 。 在 图 书馆 网 站 的 例子 中 ， 对 “预订 ” 按 
钮 需要 特殊 处 理 。 不 同 的 状态 会 产生 不 同 的 操作 ， 例 如 ， 如 末 
尚未 取 书 ， 按 钮 上 的 文字 就 可 以 更 改 为 “取消 预订 。 


FutureLearn 的 “进度 切换 ”按钮 ( 见 图 8-14) 也 可 以 看 作 一 个 
特例 。 它 只 在 学 习 步 又 中 出 现 ， 指 示 步 又 是 否 完成 。 弹 跳动 画 
和 勾 志 图 标 旨 在 给 人 一 种 庆祝 的 感 党， 没有 其 他 任何 作用 。 


Mark as 


complete 


图 8-14 ”进度 切换 按钮 

也 许 正 是 由 于 这 种 特殊 性 ， 我 们 才 会 纠结 于 它 的 命名 一 一 我 们 
想 出 一 个 通用 名 称 (“进度 切换 ”按钮 ) 的 同时 ， 也 意识 到 它 
可 以 有 一 个 跟 其 功能 密切 相关 的 名 称 ， 在 这 种 情况 下 ,“ 标 记 
完整 ”按钮 都 是 一 个 更 合适 、 更 令 人 难忘 的 名 称 。 

对 于 “进度 切换 ”按钮 和 和 “预订” 按钮， 我们 都 尽力 让 它们 变 
得 让 人 难忘 。 它 们 是 品牌 的 关键 功能 ， 也 可 以 说 是 形成 标志 性 
时 刻 的 机 会 。 


图 灵 社 区 会 员 ChenyangGao(2339083510@qq.com) 专 享 尊重 版 权 
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像 这 样 的 特例 应 该 只 能 偶尔 出 现 。 它 们 拥有 特殊 的 外 观 ， 也 不 
能 打破 一 般 的 模式 规则 。 


8.7 小 结 


在 本 章 中 ， 我 们 对 界面 的 一 小 部 分 做 了 系统 化 工作 。 你 的 团队 
走 完 这 个 过 程 后 ， 你 将 对 自己 的 设计 体系 和 需要 注意 的 地 方 有 
更 多 的 了 解 。 


接 下 来 ， 团 队 就 可 以 将 精力 放 到 代码 和 Sketch 上 ， 来 完成 模式 
的 最 终 设计 了 一 一 确 你 模式 涵盖 了 所 有 必要 的 用 例 、 定 义 各 种 
状态 和 行为 ， 并 对 代码 进行 重 构 。 


第 一 次 进行 这 项 练习 的 时 候 ， 你 可 能 会 迷失 在 数目 众多 的 元 素 
和 模式 中 。 但 不 必 一 次 就 做 完 所 有 的 工作 ， 你 可 以 从 构成 基础 
体验 的 核心 模式 开始 ， 完 成 之 后 再 转 问 男 一 个 领域 。 重 要 有 鸭 
是 ， 随 着 设计 体系 的 发 展 ， 这 项 工作 需要 定期 开展 。 这 有 点 像 
园 忆 一 一 你 离开 它 的 时 间 越 长 ， 它 就 越 难以 保持 良好 的 形状 。 


下 和 面 ， 我 们 转 问 感 知性 模式 .。 
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感 基 性 模 陈 的 系统 化 


本 章 将 描述 如 何 定 义 感知 性 模式 ， 以 及 如 何 将 其 集成 到 设计 体 
系 中 。 


最 近 ， 在 我 使 用 的 两 悉 产 品 里 面 ， 有 一 样 东西 引起 了 我 的 往 
划 ， 就 征 手 风 雁 控件 的 设计 。 两 个 男 面 中 的 手 风 雁 控件 看 起 来 
很 像 ， 功 能 也 一 样 〈 都 是 标准 功能 )， 即 对 内 容 的 不 同 部 分 进 
行 展 开 和 折 登 。 在 大 多 数 人 眼 里 ， 这 两 个 组 件 “ 看 起 来 部 十 舒 
服 的 。 但 不 知 何故 ， 甚 中 的 一 个 有 些 不 够 完善 。 鼠 标 巧 停 效 
东 太 过 细微 ， 过 流动 画 有 点 慢 ， 当 前 选 定 的 状态 没有 突出 显 
示 ， 标 题 和 正文 的 差异 不 够 大 。 


而 另 一 个 则 似乎 所 有 细 区 都 恰到好处 。 相 同 的 模式 一 一 配色 、 
过 波 、 对 比 、 排 版 一 一 贯 军 整个 界面 ， 让 人 感觉 牢 不 可 破 ， 征 
精心 打磨 出 来 的 。 尽 管 这 两 个 产品 的 实用 性 差 不 太 多 ， 但 其 中 
一 个 给 人 的 感 向 古 可 靠 的 ， 而 另 一 个 给 和 的 感 客 征 脆弱 的 。 


有 时 我 们 认为 ， 如 琳 美 观 不 是 我 们 所 退 求 的 ， 我 们 就 没有 必 
要 重视 审美 :“ 这 只 不 过 是 一 个 工具 ， 没 必要 让 它 显 得 特别 。 
但 是 ， 这 样 想 的 话 ， 我 们 就 错过 了 影响 产品 感知 的 重要 机 会 。 
当然 ， 重 要 的 不 是 样式 本 号 ， 而 是 它们 产生 的 效果 。 工 具 应 
该 有 具有 可 用 性 和 有 用 性 ,但 它 也 应 该 让 人 感觉 人 简单、 安全 和 
稳健 。 


为 了 用 一 种 可 靠 、 可 扩展 的 方式 去 影响 用 户 的 感知 ， 我 们 需要 
熟悉 创造 这 种 感知 的 模式 。 


感知 性 模式 的 系统 化 


9.1 超越 样式 属性 


玫 虑 配色 、 排 版 、 间 距 及 其 他 样式 的 时 候 ， 最 明显 的 方法 是 使 
用 属性 值 : 颜色 值 、 文 本 大 小 、 长 度 等 。 


以 配色 为 例 。 很 多 模式 库 讲 到 配色 的 时 候 ， 就 用 一 组 颜色 值 来 
表示 〈 见 图 9-1)。 


ark-8 dark dark-11 


9-1 Pivotal 的 颜色 值 展示 了 呈现 颜色 信息 的 常用 方法 


即便 给 出 了 标准 化 的 调 色 板 ， 仍然 有 很 多 需要 解释 的 地 方 。 
| 
颜色 如 何 搭配 ? 


颜色 的 轻微 差异 并 不 是 问题 ? 对 于 熟悉 设计 体系 的 人 来 说 ， 这 
种 想法 显然 与 他 们 的 直觉 不 符 。 事 实 上 ， 如 末 监 色 在 整个 界面 
中 具有 一 致 的 含义 ， 那 么 即便 有 二 十 种 蓝 色 也 不 是 问题 。 但 如 
果 蓝 色 一 会 儿 代 表 链 接 ， 一 会 儿 又 代表 不 可 点 击 的 标题 ， 就 会 
引发 可 用 性 问题 。 仅 仅 把 一 组 颜色 值 共 享 出 来 是 不 够 的 ， 还 需 
要 共 至 不 同 的 环境 下 的 颜色 的 用 法 。 


类 似 地 ， 仅 仅 把 不 同 的 字 吉 列 出 来 也 无 法 提升 排版 的 质量 。 在 
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FutureLearn， 即 使 我 们 已 经 标准 化 了 所 有 的 文字 大 小 ， 形 成 了 
统一 的 尺度 ， 但 仍然 会 发 现 字 号 不 统一 的 标题 一 一 设计 师 和 开 
发 人 员 都 不 确定 需要 选择 字号 列表 中 的 哪 种 大 小 。 因 此 ， 我 们 
需要 针对 排版 提供 清晰 明确 的 使 用 指南 ( 见 图 9-2)， 并 让 每 个 


人 都 理解 。 

viewport: < 679 viewport: 680 - 1694 viewport: 1695+ 

content: 576 content: 648.0 content: 728.96 
pico 11.24 / 16.05 12.64 / 19.78 14.22 / 22.00 
nano 12.64 / 17.80 14.22 / 22.00 16.00 / 24.50 
micro 14.22 / 19.78 16.00 / 24.50 1800 | | 27:31 
milli 16.00 / 22.00 18.00 (4| 27.31 20.25 / 30.48 
uno 18.00 / 24.50 20.25 / 30.48 22.78 / 34.04 
kilo 20.25 |7| 2X31 22.78 / 34.04 25.63 / 38.04 
mega 22.78 / 30.48 25.63 / 38.04 28.83 / 42.55 
giga 25.63 / 34.04 28.83 / 42.55 32.44 / 47.61 
tera 28.83 / 38.04 32.44 / 47.61 36.49 |7| 53:32 
peta 32.44 / 42.55 36.49 / 53.32 41.05 / 59.73 
exa 36.49 / 47.61 41:05 /| 59.73 46.18 / 66.95 
zetta 41.05 |71 53.32 46.18 / 66.95 51.96 / 75.06 
yotta 46.18 / 59.73 5196 |¥| 75:06 58.45 / 84.20 
bronto 51.96 / 66.95 58.45 / 84.20 65.76 / 94.47 


9-2 ”这 份 字 号 列表 为 FutureLearn 所 有 的 排版 商定 了 基础 


如 来 我 们 希望 定义 样式 的 时 候 能 表达 出 模式 的 目的 ， 并 促进 用 
法 的 一 致 性 ， 我 们 该 怎样 做 呢 ? 和 以 前 一 样 ， 我 们 将 先 从 较 高 
的 层次 开始 ， 再 深入 了 解 细 贡 。 对 于 功能 性 模式 ， 我 们 先 关 注 
用 户 行为 。 对 于 感知 性 模式 ， 我 们 将 从 美学 特征 入 手 。 


感知 性 模式 的 系统 化 


9.2 美学 特征 与 标志 性 模式 


每 个 界面 部会 给 人 杀 种 感觉 ， 哪 怕 它 只 有 文字 或 者 只 有 声音 。 
有 效 的 样式 不 会 流 于 表面 ， 而 会 随 着 产品 的 发 展 而 发 展 一 一 它 
们 反映 的 古 产 品 的 精神 和 核心 设计 原则 (如 “追求 永恒 ， 而 不 
古 追 求 潮流 ”“ 方 同 大 于 选择 ”等 )。 想 想 这 些 品质 是 如 何 体现 
的 一 一 古 什么 让 你 的 产品 感 沉 永恒 、 实 用 、 传 统 、 新 汀 、 温 瞬 
或 是 可 靠 ? 


如 果 设 计 已 经 存在 一 段 时 间 了， 再 去 解析 模式 就 不 容易 了 。 我 
们 已 经 知道 ， 随 着 产品 的 发 展 ， 其 核心 美学 特征 可 能 会 发 生变 
化 (参见 第 4 章 中 FutureLearn 的 例子 )。 考 察 样式 时 ， 你 可 能 
会 注意 到 ， 有 的 样式 比 其 他 样式 更 为 有 效 ， 或 与 品牌 有 更 强 的 
关联 。 


如 果 想 让 整个 团队 (不 仅 是 设计 师 ) 都 聚焦 到 一 个 页 面 ， 不 妨 
从 标志 性 模式 ”的 创建 开始 做 起 ， 尤 其 是 当 团队 成 员 还 不 善于 
创建 感知 性 模式 的 时 候 。 


让 团队 里 的 每 个 人 写 下 彩 啊 产品 感 观 的 最 令 人 难 扎 、 节 独特 的 
元 素 。 


口 当 人 们 想到 你 们 的 产品 时 ， 节 先 想 到 的 样式 是 什么 ? 

D 用 户 是 如 何 评价 你 们 产品 的 审美 的 ? 

口 在 用 户 的 反馈 中 ， 是 否 有 一 些 经 营 提 到 的 时 刻 ? (例如 “ 那 
个 粉红 色 的 对 勾 总 能 让 我 开心 地 笑 起 来 。) 


还 可 以 试 着 去 找 那 些 与 品牌 调 性 不 符 的 设计 ， 例 如 ，“ 我们 要 
的 古 细微 的 变化 ， 而 不 古 快 速 地 弹跳 ”。 


不 仅 要 芳 谍 属性 ， 还 要 考虑 更 高 级 别 的 原则 、 不 同 元 素 的 组 合 
以 及 它们 之 间 的 关系 。 例 如 ， 不 能 简单 地 把 颜色 列 出 来 ， 还 


@) 参见 第 4 章 。 
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要 说 明 它 们 之 间 的 比例 :“ 主 要 是 白色 ， 辅 以 粉红 色 和 监 色 点 
级 。 此 外 ， 还 可 以 为 模式 配 上 上 典型 示例 。 


做 完 的 列表 可 能 是 下 面 ( 见 图 9-3) 这 个 样子 的 : 


TYFocRAPHY 
Vo\CE 2 SHRP a 
”DIRECT POSIMYUE , ENCOWR AGING e。 MOSTLY SQUARE + ae LRCE TYEESIZE 
TONE OF NOWCE 村 OCCASIONDRLLY CRCWALAR_ Us ON RERNDAEICTUY 
《YCw&E HALFWAY TRRDWAGH SUAPES 


“ MiGH CONTRAST: LA Roe HENDING- 
S2ss IN RROPRTNON D BoDY Cop 


* FUENDG Pur RESEMED eas 4 5 6 * 4co. LAYout GEBRK ( Focus) 
“WEL. DONE” QixTtHER THAN 


WONUY TWO STEPS TD GO 


; » EWROeA ° 

“WDuoo\ Nou'ge A SupEr STA®)” 四 四 ”回应 加 ee 
* ELENENT OF HUMouR. 

“NERE HANTCHING SOMEWHING NEWY Tf 3 


GENePCO 人 AS WUITE SPACE 


A 


PRINARALY WHITE coLouR 
LETCE ， WITH PINK AccENIS 


ANIMATIONS 
*， SMALL SoFT MOVE 
| 。 人 PX GREY PoRDER NENT OR 


cE No MOUEMENT AT ALU 
QuRLE CoNS wm™ 
NOT QuCk, RoWNCY x 
» PINK TO BLUE FULL A RENK” a ( y « SPR\NGY) 
GRADIENT (CELEBRATION) 


* PINk TO ELUE SUBTE HOUER， 


国生 本本 本 本 省 本 coe Goose 
= EE 


9-3 寻找 FutureLearn 的 标志 性 模式 的 实践 


我 发 现 ， 团 队 成 员 一 起 寻找 标志 性 模式 ， 能 为 整个 感知 性 模式 
的 创建 过 程 捉 供 指导 和 灵感 。 例 如 ， 在 检查 形状 的 时 候 ， 如 未 
圆 形 是 界面 中 一 个 显 赣 的 特征 ， 而 你 发 现在 某 些 情况 下 使 用 了 
方形 ， 你 就 会 觉察 出 问题 。 


9.3 ”识别 感 和 性 模式 


处 理 完 标 志 性 模式 之 后 ， 就 可 以 依次 处 理 每 一 种 样式 了。 样式 
的 种 类 包括 以 下 这 些 


口 配色 


感知 性 模式 的 系统 化 


D 交互 状态 
口 动画 

口 排版 

口 间距 

口 图 标 样式 
口 形状 和 边框 
D 插图 

口 照片 

上 语气 和 语调 
口 音效 


在 处 理 以 上 每 一 个 类 别 的 时 候 ， 者 可 以 用 下 面 这 些 简 单 的 步 又 
将 其 系统 化 。 


(1) 从 目的 开始 。 

(2) 收集 现 有 元 素 并 对 它们 进行 分 组 。 
(3) 定义 模式 和 模块 。 

(4) 形成 统一 的 指导 原则 。 


很 难 一 次 性 处 理 完 所 有 的 样式 。 每 个 类 别 部 需要 有 各 目的 寞 面 
清单 ， 如 采 后 续 出 现 界 面 上 的 改动 ， 可 能 还 需要 花 一 些 时 间 将 
这 些 变 化 集成 进来 。 


在 处 理 这 些 样式 类 别 的 时 候 ， 可 能 会 产生 重复 的 内 容 。 排 版 和 
间距 、 颜 色 和 文字 、 形 状 和 边框 、 边 框 和 图 标 ， 它 们 之 间 都 有 
可 能 产生 内 容 上 的 重合 。 但 这 并 不 是 坏事 ， 因 为 你 构建 样式 时 
可 以 参考 其 他 已 经 定义 好 的 属性 ， 还 可 以 清楚 地 看 到 它们 之 间 
的 关系 。 例 如 ， 你 对 色彩 的 定义 会 用 于 交互 状态 ， 对 交互 状态 
的 定义 会 用 于 动画 。 在 处 理 排版 和 间距 的 时 候 ， 可 以 看 到 字号 
大 小 是 如 何 影响 文字 周围 的 间距 的 。 
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9.4 配色 


第 一 步 的 目标 是 让 颜色 的 使 用 更 加 一 臻 。 为 此 ， 我 们 将 首先 列 
出 颜色 在 界面 中 扮演 的 角色 。 


9.4.1 从 目的 开始 


用 词 很 重要 。 对 目的 的 表述 不 应 该 太 模 糊 或 者 太空 调 。 加 拿 大 
政府 的 “Web 体验 工具 箱 ”(Web Experience Toolkit) 里 面 有 这 
样 的 陈述 :“ 为 元 素 设 置 颜色 ， 要 么 是 为 了 装饰 ， 要么 是 为 了 
传递 信息 。 这 样 的 表述 作用 不 大 。 


需要 表述 得 更 明确 一 些 。 例 如 ， 颜 色 可 以 用 于 : 


D 显示 不 同类 型 或 不 同 层级 的 文本 (正文 、 标 题 、 块 级 引用 等 ) 
D 突出 显示 链接 和 操作 (主要 CTA、 辅 助 性 CTA、 链 接 等 ) 

D 提请 注意 消息 ， 并 区 分 不 同类 型 的 消息 〈 确 认 、 警 告 等 ) 
口 和 
口 


将 内 容 隔 开 ， 突 出 显示 重点 内 容 (通过 背景 、 边 框 等 
区 分 不 同类 型 的 数据 (图 表 、 图 形 等 ) 


你 所 定义 的 角色 ,决定 了 界面 清单 的 类 别 。 


9.4.2 ”收集 现 有 颜色 并 分 组 


尽管 我 喜欢 纸 质 的 模式 清单 (因为 纸张 是 有 形 的 ), 但 通过 在 纸 
上 剪 切 样式 来 对 样式 进行 评审 ， 显 然 不 太 可 行 。 用 Google 文档 
可 以 更 好 地 完成 这 份 工作 ， 此 外 还 可 以 用 Keynote、PowerPoint 
以 及 Sketch 一 一 任何 适合 你 的 工具 都 可 以 。 


你 固然 可 以 为 每 个 类 别 者 新建 一 份 空 日 文档 ， 并 根据 实际 情况 
修改 表 头 、 增 加 字段 ， 但 最 好 不 要 从 空白 文档 开始 ( 见 表 9-1)。 


感知 性 模式 的 系统 化 


表 9-1 在 Google 文档 中 对 颜色 进行 评审 的 初始 类 别 的 例子 


突出 显示 的 链接 和 操作 


Mocm | | | 


显示 不 同类 型 或 不 同 层 级 的 文本 


9 


= 


竺 内容 区 隅 开 ， 突 出 显示 重点 内 容 


每 个 类 别 和 都 有 以 下 几 列 。 
D 类 型 : 指定 使 用 颜色 对 象 的 类 型 ， 如 行动 召唤 、 标 题 、 反 馈 
请 息 等 。 


口 示例 : 添加 元 素 的 屏幕 截图 ， 以 显示 颜色 用 在 哪里 。 
口 值 : 指定 十 六 进 制 的 颜色 值 。 
D 感觉 : 如 采 闫 色 的 目的 是 创造 菜 种 情绪 或 感觉 , 请 在 此 说 明 。 


最 终 ， 你 会 得 到 一 张 按 目的 进行 分 组 的 颜色 实例 的 表格 。 下 面 
( 见 表 9-2) 是 对 公共 图 书馆 网 站 界面 中 的 链接 和 按钮 进行 评 
审 的 例子 。 用 同样 的 方式 ， 还 可 以 对 文本 颜色 、 反 馈 消 县、 青 
景 、 边 框 等 要 素 进 行 收集 和 分 组 。 
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表 9-2 在 Google 文档 中 对 链接 和 按钮 进行 评审 


突出 显示 的 链接 和 操作 


区 
链接 


Ie 
ED 
me 
ET 
ERNIE 
vo oe 
ow eer 
opere | ooosce | 
和 


YOUNG ADULT 国 ;c<c1A16 


有 些 颜色 会 产生 特定 的 感觉 。 在 TED 网 站 的 界面 中 ， 黑 色 的 页 
眉 会 营造 出 一 种 电影 的 感觉 。 在 FutureLearn 网 站 上 ， 当 学 习 者 
完成 一 个 里 程 碑 后 ， 一 种 从 蓝 色 到 黄色 的 渐变 效果 能 营造 出 一 
种 欢 庆 的 气氛 ( 见 图 9-4)。 


Week complete! 


YOU FINISHED WEEK 


DEVELOPING YOUR RESEARCH PROJECT 


9-4 ”FutureLearn 网 站 上 用 于 庆 视 里程碑 的 疼 变 


感知 性 模式 的 系统 化 


如 果 有 能 给 产品 带 来 特定 情感 属性 的 颜色 ， 一 定 要 多 加 留意 。 
滥用 颜色 会 前 弱 选 择 该 颜色 的 初 囊 。 例 如 ， 如 果 在 FutureLearn 
促销 模块 中 也 使 用 上 面 的 渐变 ， 就 会 曾 弱 该 渐变 与 庆祝 里 程 碑 
这 个 动作 之 间 的 联系 。 


9.4.3 ”定义 模式 


下 面 ， 你 便 可 以 根据 颜色 的 目的 (其 至 感觉 ) 来 定义 其 用 法 的 模 
式 了 。 什 么 时 候 使 用 蓝 色 的 链接 ， 什 么 时 候 使 用 灰色 的 链接 ? 
红色 的 行动 召唤 有 什么 含义 ? 为 什么 有 些 背 景 症 灰色 的 ， 有 些 表 
景 却 是 色彩 鲜艳 的 ? 吐 色 的 标题 和 红色 的 标题 有 什么 区 别 ? 


不 必 急 着 确定 十 六 进 制 的 颜色 值 ， 重 要 的 是 对 界面 上 颜色 的 用 
法 达成 一 致 。 下 面 ( 见 图 9-5) 是 为 链接 和 按钮 定义 模式 的 一 
小 示例 ， 


CTA 按钮 、 人 藤 入 的 链接 、 支持 性 链接 、 鼠标 悬 停 ”成 为 焦点 
CTA 链接 、 导航 链接 支持 性 导航 
主要 链接 


BLUE-DARK FOCUS 


BLUE-BASE 


RED-DARK 


9-5 图 书馆 网 站 上 如 何 定义 链接 和 按钮 的 颜色 模式 


目的 优先 意味 着 有 时 需要 改变 颜色 的 用 法 。 例 如 ， 如 末 可 点 击 
的 元 素 是 红色 的 ， 我 们 就 希望 所 有 红色 元 素 都 是 可 点 击 的 (如 
图 9-5 所 示 ) 。 但 在 下 面 ( 见 图 9-6) 的 例子 中 ， 你 会 发 现 红色 
的 “Recommendations”( 推 荐 图 书 ) 标题 是 不 可 点 击 的 。 在 这 
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种 情况 下 ， 我 们 可 以 旁 虑 将 标题 的 闫 色 改 为 黑色 ， 或 者 让 标题 
变 成 可 反击 的 。 


Recommendations 


CHIMANANDA 
J 国 


Use our interactive tool to discover your 
next great read. 


图 9-6 图 书馆 网 站 上 一 个 不 可 点 击 的 红色 标题 


还 需要 注意 到 ， 这 些 决定 可 能 会 改变 整个 网 站 的 审美 。 如 本 我 
们 决定 将 链接 和 行动 召唤 由 览 色 改 为 红色 ， 就 有 可 能 导致 一 个 
明显 的 整体 变化 一 一 突然 间 多 了 很 多 红色 ， 少 了 很 多 蓝 色 。 


在 FutureLearn 的 界面 中 ， 我 们 曾 考虑 将 课程 进度 模块 中 用 到 的 
方形 改 为 圆 形 ， 改 完 后 才 意 识 到 课程 进度 是 一 种 标志 性 模式 .， 
改变 形状 会 导致 品牌 感觉 的 变化 。 


理解 标志 性 模式 可 以 帮 你 找到 改变 的 平衡 点 ， 确 保 现 有 的 美学 
特征 不 会 被 弱化 。 如 末 你 的 目标 是 对 当前 设计 进行 改版 ， 那 么 
改版 工作 就 需要 在 对 模式 进行 系统 化 之 前 完成 。 


9.4.4 ”指定 模块 


在 调 色 板 里 面 ， 一 种 颜色 有 数 十 种 变 体 的 情况 并 不 罕见 (Marcin 
Treder 在 为 UXPin 构建 颜色 库 时 指定 了 62 种 灰色 )。 大 多 数 时 
候 这 样 做 都 是 没有 必要 的 ， 这 会 给 设计 和 编码 带 来 不 必要 的 复 


人 


感知 性 模式 的 系统 化 


这 一 步 的 目标 ， 古 增加 配色 的 集中 度 、 准 确 性 和 可 访问 性 。 通 
常 来 说 ， 这 意味 着 要 减少 每 种 颜色 的 变 体 的 数量 。 


下 面 是 一 些 对 此 过 程 很 有 帮助 的 提示 。 

1. 仅 从 需要 的 开始 

目的 导向 的 调 色 板 的 优势 在 于 它 可 以 引导 你 的 选择 ， 限 制 颜 色 
数量 。 从 颜色 的 角色 和 含义 和 人手 ， 就 很 容易 弄 请 楚 到 底 需 要 多 


少 种 选项 。 例 如 ， 通 过 思考 在 何 处 使 用 蓝 色 、 如 何 使 用 监 色 ， 
你 可 能 发 现 ， 只 需要 三 种 蓝 色 的 变 体 就 够 了 ( 见 图 9-7)。 


(@JolNIsmeot: 1 
#0B6F9E 


#1B7FA7 #0095C8 #2799C5 #1DA1D4 @blue-base 


#62A0C6 #3B99FC #114F8C 
9-7 减少 变 体 的 数量 


根据 具体 情况 的 不 同 ， 不 同 明暗 色调 的 变 体 的 数量 也 会 有 所 不 
同 。 在 FutureLearn 的 界面 中 ， 我 们 为 了 让 调 色 板 保 持 请 爽 ， 有 
意 避 免 了 指定 相同 色相 的 不 同 明暗 度 的 变 体 〈 见 图 9-8)。 这 样 
做 有 利于 保持 配色 体系 简单 、 聚 焦 。 


#007DB2 


相反 ， 原 型 制作 工具 UXPin 却 提 供 了 明暗 两 种 色调 的 模式 ( 见 
图 9-8) ， 这 意味 着 它 的 调 色 板 里 每 种 色相 都 需要 有 几 种 明暗 度 
不 同 的 颜色 ， 才 能 确保 在 明暗 两 种 模式 下 都 有 足够 的 对 比 度 。 


有 时 ， 你 确实 需要 有 比较 多 的 颜色 选项 ， 特 别 是 有 多 个 主题 的 
时 候 ， 或 者 需要 处 理 数据 可 视 化 的 时 候 。 但 一 定 要 避免 为 奶 求 
调 色 板 的 多 样 性 而 添加 颜色 。 选 项 越 多 ， 体 系 就 越 复 杂 ， 也 就 
越 难 实现 配 色 的 一 致 性 。 应 当 仅 从 你 需要 的 东西 开始 ， 然 后 在 
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此 基础 上 开展 其 他 工作 。 


Blue Pink Yellow 


#O000 人 f #de00a5 #fecb51 


Purple 
#8700cd 四 


9-8 对 比 ( 左 ) FutureLearn 的 颜色 和 ( 右 ) UXPin 的 颜色 ， 可 
ee 差异 的 


如 打 一 种 颜色 有 两 种 以 上 的 变 体 ， 还 可 以 先 设置 一 个 基准 的 颜 
色 值 ， 再 为 其 他 色调 指定 明 瞳 度数 值 ， 比 基准 亮 20% ， 比 基准 
暗 20% ， 等 等 。 基 崔 颜 色 值 提供 了 一 致 的 默认 值 。 当 我 们 需要 
郑 虑 很 多 选项 的 时 候 ， 仅 使 用 默认 值 和 增 减 量 更 容 多 记忆 和 使 
用 。 指 定 基 准 值 和 增 减 量 的 方法 也 适用 于 其 他 感知 性 模式 ， 如 
排版 (基准 字号 )、 间 距 (基准 测量 单位 ) 和 动画 ， 我 们 将 在 
后 面 讲 到 这 些 。 


2. 确保 颜色 对 比 度 的 可 访问 性 


有 必要 测试 文本 颜色 和 背景 颜色 的 对 比 程度 。 根 据 需 要 调整 或 
删除 颜色 值 ， 限 制 颜色 的 数量 。 例 如 ， 如 果 图 书馆 网 站 上 有 
好 几 种 浅 灰 色 用 于 表示 辅助 性 链接 ， 但 其 中 只 有 一 种 通过 了 
WCAG 2.0 标准 ， 那么 , 该 选择 哪 一 种 浅 灰 色 作为 辅助 性 链接 
的 默认 颜色 值 就 很 明显 了 。 


() WCAG 2.0 是 “Web 内 容 无 障 人 得 指南 2.0”(Web Content Accessibility 
Guidelines 2.0) 的 简称 ， 它 是 一 份 W3C 推荐 标准 。 一 一 译 者 注 
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有 很 多 工具 可 用 于 检测 颜色 对 比 度 ， 例 如 Lea Verou 做 的 Contrast 
Ratio ( 见 图 9-9) 就 是 其 中 之 一 ， 该 工具 相当 方便 易 用 。 


ratio 
white EE #7B756F 


Passes AA level for any size text 
and AAA for large text (above 
18pt or bold above 14pt) 


Background: 


Ho 


ou type, the contrast ratio indicated will update. 


9-9 Lea Verou 的 Contrast Ratio 


值得 一 提 的 是 ， 调 整 颜色 值 需要 仔细 地 平衡 好 整体 的 美感 。 比 
如 ， 将 蓝 色 加 深 ， 可 能 会 让 整个 界面 突然 产生 另 一 种 感觉 ， 变 
得 不 那么 活 涛 。 如 有 末 你 在 创建 调 色 板 的 时 候 没 有 考虑 颜色 的 可 
访问 性 ， 此 时 再 去 调整 色彩 就 需要 多 花 一 些 精力 。? 


可 以 为 线 色 和 深 色 背景 分 别 引 入 不 同 的 强调 色 ， 可 以 将 彩色 背景 
上 的 文字 从 浅 色 改 为 深 色 或 从 深 色 改 为 浅 色 。 还 有 很 多 工具 可 以 
用 来 生成 对 比 度 合理 的 色彩 组 合 ， 或 者 为 原始 配色 寻找 具有 可 访 
问 性 的 替代 方案 ， 例 如 Color Safe 和 Tanaguru Contrast Finder。2 


9.4.5 ”就 指导 原则 达成 一 致 


最 后 ， 团 队 需 要 就 使 用 颜色 的 基本 原则 达成 一 致 。 指 导 原 则 有 
助 于 更 加 整体 地 看 待 配色 ,而且 ， 当 某 些 东西 出 现 异常 时 还 能 


@ 如 果 一 个 项 目 在 一 开始 就 将 颜色 的 可 访问 性 作为 一 个 重要 指标 ， 就 不 会 
得 到 差别 这 么 大 的 调 色 板 。 

@O) 若 想 进一步 了 解 平 衡 美 学 方面 的 内 容 ， 强 烈 推 荐 Geri Coady 的 Color 
Accessibility Workflows。 
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参 注 它们 。 有 些 原则 是 比较 通用 的 ， 例 如 “必须 确保 有 可 访问 
性 的 颜色 对 比 度 ”， 有 些 则 是 品牌 特有 的 ， 可 以 在 设计 标志 性 
模式 的 过 程 中 定义 。 


例如 ， 在 Sky 的 Tookit 设计 体系 里 ， 该 团队 解释 了 使 用 最 小 调 
色 板 的 原因 。 

我 们 用 描述 性 的 内 容 来 定义 实际 用 到 的 颜色 。 我 们 不 会 用 颜色 
值 来 定义 我 们 的 网 站 或 网 站 里 的 内 容 。” 


牛津 大 学 鸭 样 式 指责 清晰 地 说 明了 应 该 如 何 使 用 他 们 定义 的 闫 
色 ， 以 及 为 何 使 用 这 些 颜色 。 


牛津 蓝 〈( 深 色 ) 主要 用 于 页 面 的 一 般 元 素 ， 例 如 页 局 和 页 脚 的 
背景 。 这 让 整个 网 站 都 呈现 强烈 的 品牌 感 。 但 由 于 这 些 区 域 的 
品牌 感 如 此 强烈 ， 因 此 不 建议 在 其 他 地 方 大 面 积 地 使 用 该 颜 
色 。 不 过 ， 它 可 以 用 于 一 些 较 小 的 元 素 ， 如 活动 日 期 图 标 、 搜 
索 框 、 筛 选 框 等 。 


9.5 动画 


即便 面 对 更 复杂 的 模式 (如 动画 )， 我 们 还 是 可 以 遵循 相同 的 
步骤 : 从 目的 开始 ， 收 集 现 有 样式 并 对 其 分 组 ， 定 义 模 式 和 模 
块 。 这 次 ， 我 们 以 FutureLearn 为 例 。 


9.5.1 目的 和 感受 
确定 动画 所 承担 的 角色 。 举 例如 下 。 


D 让 交互 状态 之 间 的 过 渡 变 得 轻柔 ， 例 如 鼠标 世 停 时 的 动画 。 

口 对 特定 的 内 容 或 操作 加 以 强调 , 例如 鼓励 用 户 前 进 到 下 一 步 。 

D 隐藏 或 显示 额外 信息 ， 例 如 隐藏 在 侧 辽 的 沫 单 、 下 拉 菜 单 、 
弹 窗 等 。 
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动画 的 感觉 是 男 一 个 需要 着 重 考 虑 的 方面 。 在 Designing Interface 
Animation 一 书 中 ， 作 者 Val Head 提 到 了 如 何 用 描述 品牌 特性 
的 形容 词 来 定义 动作 。 轻 快 的 弹跳 动画 给 和信 的 感 完 是 充满 活力 
的 ， 而 平缓 的 动画 给 人 的 感 完 是 明确 的 、 稳 定 的。 


在 整个 界面 上 ， 有 效 且 有 意义 的 动画 应 当 给 人 的 感觉 是 有 明确 
目的 的 。 


9.5.2 ”评审 现 有 动画 


明确 了 动画 在 界面 中 扮演 的 角色 和 给 人 的 感受 之 后 ， 就 该 对 现 
有 的 动画 进行 评审 了 ( 见 表 9-3)。 收 集 现 有 的 动画 ， 并 对 它们 
进行 分 组 ， 就 像 我 们 之 前 处 理 颜 色 一 样 。 可 以 使 用 QuickTime 
或 其 他 屏 医 了 永 制 软件 来 制作 动画 示例 。 


表 9-3 FutureLearn 团队 在 Google 文档 中 对 “状态 过 渡 动 画 ” 进 
行 评审 


让 交互 状态 之 间 的 过 渡 变 得 轻柔 


2 秒 渐变 粉红 色 一 “| 平静、 
蓝 色 轻柔 


0.4 秒 淡 入 淡出 | 白色 一 | 
灰色 蔷 
0.4 秒 淡 入 淡出 


淡出 一 1.1 秒 0 一 0.15 
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Re 


Qh 


Online & Digital 


问答 导航 0.3 秒 渐 变 尺寸 平静 
1 一 1.2 | 轻柔 


9.5.3 ”定义 模式 


根据 目 I 画 用 法 模式 。 在 FutureLearn 的 界面 中 ， 
强调 动画 通常 感觉 比较 有 趣 ， 而 状态 变化 的 过 渡 动 画 则 较为 微 
妙 和 平静 。 


如 琳 这 是 你 在 整个 设计 体系 中 希望 形成 的 调 性 ， 就 试 着 将 所 有 
的 动画 统一 成 这 种 样式 。 同 处 理 标 志 性 模式 一 样 ， 将 效果 好 的 
动画 当 作 示例 ( 即 有 效 地 实现 目的 并 具有 正确 的 感觉 )， 并 将 
这 些 属 性 放 到 同一 类 别 的 其 他 动画 看 一 看 。 最 终 ， 你 会 得 到 一 
些 模式 ( 见 表 9-4)。 


表 9-4 FutureLearn 上 按 目的 和 感觉 分 组 的 动画 模式 


交互 状态 改变 颜色 ，2 秒 渐变 
透明 度 ， 淡 入 : 0.3 秒 ， 淡 出 : 1.1 秒 
缩放 ，0.4 秒 渐变 
向 下 滑动 ，0.4 秒 动 画 


向 上 滑动 ，0.7 秒 渐变 

淡出 ，0.3 秒 新 变 

旋转 ，0.3 秒 渐变 

激烈 跳动 ，0.3 秒 动画 
么 微 跳动 

摆动 ，0.5 秒 动画 
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9.5.4 指定 模块 


关于 动画 有 两 个 重要 的 概念 : 时 长 和 过 渡 效 末 。 它 们 是 密切 
相关 的 。 时 长 即 动画 的 过 程 需要 多 长 时 间 。 如 和 朱 确 定 了 距离 ， 
时 长 就 决定 了 速度 。 过 滤 效 末 定 义 了 动画 是 如 何 进行 变化 的 ， 
它 是 从 慢 到 快 的 ( 淡 入 )， 还 是 从 快 到 慢 的 (淡出 ) ? 此外， 
我 们 需要 定义 动画 中 需要 变动 的 属性 ， 如 颜色 、 不 透明 度 、 


大 小 等 。 


时 长 对 动画 至 关 重 要 。 想 要 让 不 同 的 动画 在 时 长 上 给 人 一 致 的 
感觉 ， 并 不 意味 着 需要 指定 完全 一 样 的 时 长 数值 。 两 个 元 素 如 
本 大 小 不 同 ， 或 者 移动 的 距离 不 同 ， 哪 怕 它 们 用 一 样 的 速度 完 
成 动画 ， 给 人 的 感 完 也 完全 不 一 样 。 


我 喜欢 Sarah Drasner 的 观点 ， 她 认为 ， 对 动画 时 长 的 处 理 方法 
可 以 类 比 排版 中 对 标题 的 处 理 方法 。 对 于 动画 时 长 ， 不 要 只 指 
定 一 个 数值 ， 可 以 先 指定 一 个 基准 值 ， 再 逐 级 提升 ， 束 像 我 们 
处 理 标题 的 排版 一 样 。 例 如 ， 假 定 基准 时 长 为 0.5 秒 ， 则 行程 
较 短 的 动画 (如 放大 图 标 ) 需要 的 时 间 也 较 少 ,行程 较 长 的 动 
画 (如 弹出 菜单 ) 需要 的 时 间 也 较 长 。 全 屏 过 流动 画 则 比 基 准 


值 高 一 到 两 个 增 量 。 


9.5.5” 束 指导 原则 达成 一 致 

如 果 你 的 团队 对 创建 动画 还 不 够 自信 ， 那 么 定义 一 般 性 原则 ， 
比如 “将 动画 用 在 交互 中 最 重要 的 时 刻 "“ 别 让 动画 妨碍 任务 
的 完成 ” 便 很 有 价值 。 


最 有 用 的 原则 通常 是 与 团队 实际 相 结 合 的 。 例 如 ，Salesforce 的 
Lightning 设计 体系 中 有 一 条 原则 是 保持 动画 人 简短、 轻柔 。 


日 导 原 则 还 可 以 包含 来 自 现实 世界 的 隐喻 ， 这 可 以 为 动画 设计 
师 提 供 有 用 的 心智 模型 。Google 的 Material Design 便 提 供 了 一 


101 


102 


第 9 章 


个 很 好 的 例子 ， 它 对 如 何 将 界面 视 作 物理 材料 做 了 说 明 ， 这 可 
以 为 设计 师 和 开发 人 员 考 虑 应 用 里 的 动画 提供 不 错 的 参考 。" 


9.6 ”语气 和 语调 


用 户 界 面 中 的 语气 和 语调 对 产品 感知 有 着 至 关 重 要 的 作用 。 对 
于 基于 语音 的 界面 ， 以 及 任何 需要 用 除 视 觉 之 外 的 感官 去 体验 
的 数字 产品 ， 语 气 和 语调 尤其 重要 。Léonie Watson 是 一 位 无 障 
碍 专家 ， 由 于 失明 ， 她 也 是 一 名 屏幕 阅读 器 用 户 。 她 在 最 近 的 
一 次 访谈 中 提 到 ， 她 对 数字 产品 的 体验 “主要 来 自 写作 风格 ”。 


但 是 ， 团 队 里 定义 交互 和 模式 的 人 往往 不 古 处 理 语气 和 语调 的 
人 。 这 可 能 会 导致 在 整个 用 户 体验 中 形成 一 种 割裂 、 凌 乱 的 文 
案 写 作风 格 。 为 了 确保 语 忆 和 话 调 的 一 致 性 ， 设 计 、 品 牌 和 等 
销 团队 需要 一 起 合作 定义 这 方面 的 模式 。 


9.6.1 评审 语气 和 语调 的 模式 


除了 使 用 Google 文档 ， 评 审 语气 和 语调 的 模式 还 有 一 种 更 有 
创意 的 方法 。 内 容 策略 分 析 师 Ellen de Vries 在 她 的 一 篇 博客 文 
章 2 中 提 到 了 自己 在 Clearleft 更 新 语气 和 语调 的 故事 ,分享 了 
自己 是 如 何 “ 收 获 ” 语 言 模 式 ( 见 图 9-10) 的 ， 从 人 们 在 会 议 
和 演讲 中 使 用 的 短语 ， 到 与 创始 人 的 非 正 式 对 话 。 他 们 其 至 做 
了 一 个 情绪 板 ， 探 究 语言 和 图 像 是 如 何在 Clearleft 网 站 上 协调 
一 致 的 。 


Q) 想 了 解 更 多 关于 这 个 过 程 的 描述 ， 参 见 本 书 作者 的 文章 Integrating Animation 
into a Design System, 


Q) Take a closer Iook af the patterns in our language， 作 者 Ellen de Vries。 
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出 守 


A EW 


Le 


9-10 ”Clearleft 的 语气 和 语调 模式 清单 
9.6.2 ”定义 模式 


收集 完 材 料 之 后 ， 便 可 以 定义 模式 ， 编 写 关 于 如 何在 界面 中 使 
用 el 的 指导 说 明 。MailChimp 的 Voice 及 Tone ( 见 图 9-11) 

义 语言 模式 方面 最 有 效 的 范例 之 一 。 当 用 户 的 情绪 状态 发 
es 语调 也 应 该 跟着 变化 : 什么 时 候 适 合用 轻松 、 幽 默 
的 语调 (如 “ 干 得 不 错 ”)， 什 么 时 候 适 合用 严肃 、 务 实 的 语调 
(如 “我 们 的 一 个 数据 中 心 遇 到 了 问题 ”)。 


SUCCESS MESSAGE FAILURE MESSAGE 


USER USER 


Rel Confusion 
Finished this weeks campaign! Now I What went wrong? I really need to get Ee 
can enjoy the weekend. this campaign out. A 


cme | er a solution or next Step 
iain 


Were experiencing a 
se problem at one of our 


Fine piece of work! You 
They re probably feeting happy and rolioved — use casual 


Mn efor eve ores deserve a raise. 


data centers. Our 
oo EA 
case, and will have 
things back to normal 
shortly. 


图 9-11 MailChimp 在 用 户 获 得 成 功 时 使 用 轻松 的 语调 ， 在 用 户 
遭遇 失败 时 使 用 严肃 的 语调 
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类 似 地 ，Salesforce 也 对 币 见 用 例 做 了 拆 解 ， 并 为 每 个 用 例 
提供 了 建议 的 模式 ( 见 图 9-12 )。 需 要 传递 的 信息 的 目标 会 
影 啊 情 绪 基 调 ， 例 如 , “提供 建议 的 解决 方案 时 ， 要 使 用 轻松 


的 语言 。 


EXAMPLE 13: Profile Pic Callout Text 
ABOUT THIS EXAMPLE 
Audience: End users 


Goal & tone: The callout text gently notifies users 
that their profile picture may appear pixelated, and 
Brian Edwards suggests a simple solution using lighthearted 
language. 


Senior Manager, Change Management, Sales Business Practi 


Looking a bit fuzzy? Upload a new photo and 
About come back into focus (in high resolution, even) 


Name 
Brian Edwards Senior Managei 
& Readiness 


9-12 ”Salesforce 语气 和 语调 指南 中 的 示例 模式 


9.6.3 ”就 指导 原则 达成 一 致 


同 总 体 的 设计 原则 (参见 第 2 革 ) 一 样 ， 单 个 样式 的 指导 原则 
也 应 该 避免 模糊 不 清 的 情况 。Intuit 的 设计 体系 不 仅 列 出 了 处 理 
语气 和 语调 的 原则 (“引领 “简单 “有趣 )， 还 解释 了 如 何 
做 到 这 些 ( 见 图 9-13)。 


How to lead the way Invoice -rece 


CUSTOMER: 


Make content relevant to what customers are doing 


and where they are in the app. Avoid extraneous info. 广 Pree ner 村 


Never leave customers hanging. Tell them what they 


need to do next. 


Give customers clues about the length of workflows, 


where they are in the flow, and the benefit at the end. 

Build customer confidence with cheering and encouragement. 

Make the call to action clearly visible over other content in the screen. 

If customers run into a problem, explain what happened (if helpful) why, and how to fix it. 
Provide extra guidance for newbies or new features. Let customers know they're OK. 


Make it easy for customers to get help when they need it. 


9-13 ”Intuit 的 语气 和 语调 指南 解释 了 如 何 应 用 这 些 原 则 
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9.7 小 结 


每 种 样式 部 应 该 形成 独立 的 体系 一 一 排版 体系 、 布 局 体系 、 闫 
色 体系 ， 等 等 。 它 们 应 该 相互 关联 ， 并 指向 一 个 更 大 的 目标 : 
塑造 产品 被 感知 的 方式 。 


要 做 到 这 一 把 ， 首 先 要 看 全 局 。 从 整体 上 捕捉 美学 特征 ， 并 确 
定 对 表达 这 些 特 征 特别 有 效 的 模式 。 然 后 ， 便 可 以 对 每 种 样式 
执行 一 个 类 似 的 处 理 过 程 。 从 样式 在 产品 环境 下 所 具备 的 关键 
角色 开始 ， 对 现 有 的 实例 进行 评审 ， 再 定义 模式 和 模块 。 最 
后 ， 通 过 指导 原则 将 所 有 内 容 连 接 在 一 起 ， 并 将 它们 与 产品 的 
目的 串联 起 来 。 


下 和 面 ， 我 们 来 看 记录 和 共 至 模式 的 工具 一 一 模式 库 。 
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模式 库 


本 章 将 介绍 一 些 建立 持久 的 、 跨 领域 的 模式 库 的 实用 方法 。 


对 于 茶 些 团队 而 言 ， 如 采 没 有 模式 库 ， 便 无 法 用 系统 化 的 方法 
去 设计 和 打造 数字 产品 。 但 如 本 书 前 文 所 述 ， 模 式 库 与 设计 体 
系 并 不 等 价 ， 模 式 库 只 是 一 种 记录 和 共享 设计 模式 的 工具 。 建 
并 有 效 的 模式 库 需 要 以 设计 体系 为 基础 。 在 第 7 半 中 ， 我 们 讨 
论 了 建立 这 种 基础 的 一 些 通用 策略 。 


D 就 主要 目标 达成 一 致 ， 包 括 与 界面 相关 的 目标 和 与 团队 工作 
方式 相关 的 目标 ,例如 定义 并 标准 化 可 复 用 的 设计 模式 “ 定 
义 设 计 指 寻 原 则 “建立 模式 库 。 

口 将 目标 分 解 为 可 管理 的 故事 , 并 为 设计 体系 创建 简单 的 路 线 图 。 

口 通过 记录 和 分 享 的 方式 ， 让 工作 进展 公开 化 。 对 很 多 团队 来 
说 ， 公 开 模 式 库 促进 了 他 们 的 进步 ， 也 增强 了 他 们 的 信心 。 

口 让 整个 团队 的 人 都 能 访问 设计 语言 ， 建 立 知 识 共享 的 文化 。 

口 通过 试验 、 研 讨 会 和 小 组 活动 来 锻炼 系统 化 的 思维 方式 。 


根据 我 采访 过 的 团队 的 经 验 ， 跨 领域 的 模式 库 具 有 更 强 的 韧性 
和 持久 性 。 这 样 的 模式 库 能 推动 整个 组 织 共 享 语言 ， 并 为 每 个 
人 带 来 价值 。 相 反 ， 只 为 满足 一 个 领域 的 需求 而 构建 的 模式 库 
则 更 为 脆弱 。 

Sipgate 的 第 一 个 模式 库 有 较 高 的 技术 复杂 度 ， 这 阻碍 了 设计 师 的 
参与 。 当 他 们 不 了 解 设计 体系 里 有 哪些 模式 的 时 候 ， 他 们 便 可 能 
在 有 现成 模式 的 情况 下 ， 仍 然 使 用 Photoshop 从 头 开始 创建 页 面 。 


(QD 还 有 很 多 其 他 类 型 的 设计 文档 ， 如 品牌 识别 文档 、 前 端 样式 指南 等 。 在 
本 草 中 , 我们 只 讨论 由 团队 内 部 人 员 创建 的 .用 于 支持 设计 体系 的 模式 库 。 


模 或 库 


通常 ， 如 果 设 计 图 跟 现 有 模式 不 匹配 ， 开 发 人 员 就 不 得 不 对 
现 有 模式 进行 调整 。 这 导致 了 众多 的 让 语句 、 骨 常 以 及 重复 的 
模式 。 


Mathip Wegener，Sipgate 公司 前 况 开 发 人 员 


就 算 开 发 人 员 决 心 构建 一 个 全 面 且 能 及 时 更 新 的 模式 库 ， 如 采 
设 有 设计 师 的 积极 参与 ， 这 也 古 不 现实 的 。 


类 似 地 ， 如 条 模 却 在 设计 时 疫 有 芳 虑 内 容 ， 这 样 的 模式 在 日 前 
使 用 中 也 很 容易 出 现 问 题 。 我 们 设计 的 模式 可 能 与 特定 内 容 的 
关联 过 于 紧密 ， 例 如 ， 在 一 个 模块 里 ， 文 字 行 数 过 多 就 会 将 重 
要 的 行动 台 唤 按钮 挤 出 可 见 区 域 。 我 们 还 有 可 能 将 内 容 放 入 不 
恰当 的 模式 ， 从 而 导致 内 容 和 设计 者 无 法 让 人 满意 。 


在 本 革 中 ， 我 们 将 重点 关注 如 何 构 建 能 实现 多 个 领域 的 目标 的 
模式 库 。 


10.1 内 容 


回顾 过 往 ， 在 FutureLearn， 我 们 花 了 太 多 时 间 研 究 工 具 ， 研 究 
模式 库 应 该 是 什么 样 的 。 但 是 关于 如 何 设计 和 构建 模式 库 ， 我 
们 一 直 没 有 达成 完全 一 人 致 的 意见 ， 工 作 推 进 得 很 慢 。 不 过 ， 当 
我 们 将 注意 力 转 移 到 模式 库 的 内 容 上 面 之 后 ， 我 们 取得 了 巨大 
的 进步 ， 团 队 士气 也 有 了 很 大 的 提升 。 


将 第 8 革 和 第 9 革 摘 述 的 流程 走 一 志 ， 就 能 了 解 模 式 库 中 可 以 
包含 的 内 容 。 可 以 使 用 Google 文档 或 其 他 协作 文档 工具 进行 简 
单 的 记录 。 这 样 做 有 两 个 主要 的 好 处 。 


口 首先 ， 团 队 里 的 每 个 人 都 可 以 访问 这 些 内 容 ， 并 对 其 进行 审 
网、 编辑 、 提 供 反 馈 。 使 用 大 家 熟悉 的 、 多 于 访问 的 工具 ， 
可 以 为 更 多 的 人 提供 参与 的 机 会 。 
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D 其 次 ，Google 文档 里 的 内 容 就 像 是 一 个 模式 库 MVP" 一 一 团 
队 可 以 很 快 地 开始 用 起 来 。 一 旦 有 了 内 容 ， 再 去 考虑 如 何 设 
计 和 构建 模式 库 网 站 就 会 变 得 容易 多 了 。 


10-1 展示 了 WeWork 的 Andrew Couldwell 是 如 何 使 用 Google 
文档 为 Plasma 设计 体系 收集 模式 的 。 


10-1 使 用 Google 文档 记录 Plasma 设计 体系 的 模式 


这 样 ， 团 队 就 能 快速 了 解 所 有 核心 模式 及 其 定义 ， 不 会 因为 设 
计 上 的 约束 而 影响 工作 进展 。 


10.2 模式 的 组 织 


在 记录 内 容 的 时 候 ， 很 容易 想到 的 一 个 问题 便 是 应 该 如 何 组 织 
模式 。 一 种 弟 见 的 情况 古 团 队 很 难 就 寻 航 的 结构 达成 一 致 革 
见 。 按 钮 应 该 单独 出 现 还 是 跟 表单 元 素 放 在 一 起 ?页 脚 应 该 放 
在 哪里 ? 分 页 应 该 放 进 导 航 区 域 吗 ? 


QD) MVP 是 “最 简 可 行 产 品 ”(minimum viable product) 的 人 简称， 意思 是 恰 


好 可 以 让 设计 者 表达 其 核心 设计 概念 的 产品 。 一 一 译 者 注 


模 或 库 


内 容 组 织 结构 不 一 定 在 一 开始 就 很 完美 一 一 你 可 以 ( 且 很 可 能 
会 ) 在 以 后 对 其 进行 修改 。 重 要 的 是 团队 各 成 员 保 持 同 步 。 随 
着 模式 库 的 发 展 ， 使 用 一 种 通用 的 方法 组 织 模式 ， 会 让 添加 和 
查找 内 容 变 得 相对 容易 。 这 种 思路 不 仅 适 用 于 模式 库 ， 还 适用 
于 前 问 淋 构 和 设计 文件 。 


下 面 ， 我 们 来 看 一 些 通用 的 方法 。 
10.2.1 提炼 感知 性 模式 


最 简单 的 划分 结构 的 方法 ， 是 将 模式 库 分 为 组 件 和 样式 ( 即 功 
能 性 模式 和 感知 性 模式 )。 如 我 们 在 第 9 半 里 看 到 的 那样 ， 感 
知性 模式 是 彼此 关联 、 相 互 协 调 的 。 通 过 将 它们 提炼 ， 可 以 更 
容易 地 理解 它们 在 设计 体系 中 的 作用 。 下 面 古 不 同 设 计 体 系 里 
对 功能 性 模式 和 感知 性 模式 的 称谓 ( 见 表 10-1)。 


表 10-1 将 功能 性 模式 称 为 “组 件 ” 似 乎 是 普遍 的 共识 ， 但 感知 
性 模式 的 称谓 则 更 加 多 样 化 


本 


10.2.2 ”组 织 功能 性 模式 


虽然 样式 的 数量 是 有 限 的 ， 但 功能 性 模式 的 数量 有 可 能 持续 增 
长 。 如 来 找到 模块 不 是 很 方便 ， 就 会 极 大 地 妨碍 模式 库 的 使 
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用 。 如 末 团 队 成 员 不 知道 菏 个 模式 的 存在 ， 或 者 无 法 找到 他 们 
需要 的 模式 ， 他 们 就 有 可 能 创建 新 的 模式 ， 或 者 违背 模式 的 使 
用 规则 。 


可 以 按 字母 顺序 、 按 层级 、 按 类 型 (如 导航 、 表 单元 素 等 )、 
按 目 的 组 织 模块 ， 也 可 以 用 其 他 完全 不 一 样 的 方式 。 


1. 按 字母 顺序 排序 


在 IBM 的 Carbon、Sky 的 Toolkit、Lonely Planet 的 Rizzo ( 见 
10-2) 等 设计 体系 中 ， 组 件 列 表 是 按 字 母 顺 序 进行 排序 的 。 


COMPONENTS 
Cards 
Card 
Cards should be included as components where possible, and always in rails apps. You can include the ui_component 
AdUnits includes as detailed below. Cards can either be fixed or flexible width. 
Alerts > Flexible cards will expand to fit their container. The responsive grid is well suited for this, When used as an engine 
Rizzo also provides a helper function to generate the responsive grid classes for you. 
Badge 


Buttons > Paris Card 


exhauUste( > > 
Hero Banner > RS i =Uicomponent(’‘cards/card’, properties: {as_below} ) 
e superlativ t Car 


ES 

title: "Paris", 

description: "Paris has all but exhausted the superlatives that ca 
fixed?: true 


Picture 

POI List 

POI Maps 

Price Label > 
Slider 


Card with image 


Social Buttons > = Ui_component(’cards/card’, properties: {as_below} ) 


Tiles > 


10-2 在 Lonely Planet 的 Rizzo 设计 体系 中 ， 大 部 分 组 件 是 按 
字母 顺序 排列 的 〈 尽 管 导 航 和 表单 元 素 是 另外 单独 的 组 ) 


这 种 单一 的 列表 会 让 决策 变 得 很 容易 ， 因 为 这 样 做 避免 了 关于 
如 何 分 类 的 争论 。 但 如 末 列 表 变 得 很 长 ， 难 以 管理 ， 团 队 就 会 
开始 尝试 用 其 他 的 方法 ， 好 让 组 件 更 容 多 被 找到 。 


模 或 库 


2. 按 层 级 进行 组 织 

男 一 种 对 功能 性 模式 进行 组 织 的 方法 ， 是 按 它 们 的 复杂 度 进行 
分 类 。 有 些 团队 将 低 粒 度 元 素 与 更 复杂 有 的 元 素 分 开 。 不 同 粒度 
级 别 的 元 素数 量 和 感知 复杂 性 都 不 相同 。 


由 Brad Frost 开创 的 原子 设计 (atomic design) 是 做 层级 分 类 
的 一 种 流行 方法 ( 见 图 10-3)。 原 子 是 最 基本 的 构件 ， 它 们 能 
结合 成 更 复杂 的 独立 元 素 一 一 分 子 。 例 如 ， 表 单 标签 页 、 输 入 
框 和 按钮 能 结合 成 搜索 表单 。 分 子 构 成 有 机 体 〈 如 网 站 页 丑 )， 
有 机 体 构 成 模板 和 页 面 。 


GLL 
THE PATTERN LIBRARY 


Standard American Direct 
UiComponents VY 
® Atoms » B . -3 i 
ookingmagnet@p ... pg 
人 Molecules > | ses(4) sed in (2) | 
人 Organisms YY , 
Eurostar Booking Magnet 
Booking magnet 
Component that displays the booking magnet for Eurostar transactions 
Navigation 
Before installation 
Templates VY 
ltis presumed that you have jspm and npm installed on your machine globally and within your project. 
City Hub 
You must also install plugin-sass installed to ensure sass imports work. You can install by running the 
Deals following command: 
Homepage $ jspm install scss=sass 
Info hub Es 
Installation 
Promo 


Base Styles must be installed in order to use the component. For more detailed explaination please 


10-3 ”欧洲 之 星 模 式 库 里 按 层 级 组 织 的 组 件 


作为 一 种 方法 论 ， 原 子 设计 有 很 多 好 处 。 将 模式 视 为 租 套 的 俄 
罗斯 套 娃 ,有 助 于 元 素 的 复 用 , 因为 你 会 留心 层次 的 划分 。 对 
组 合 和 封装 模式 的 规则 进行 定义 ， 能 提高 整个 设计 体系 的 一 致 
性 。 在 FutureLearn， 当 我 们 对 模块 化 设计 思维 还 不 就 悉 时 ， 这 


(D 俄罗斯 套 娃 是 来 自 俄罗斯 的 一 种 木 制 玩具 ， 一 般 由 多 个 一 样 图 案 的 空心 
木 娃 娃 一 个 套 一 个 组 成 。 一 一 译 者 注 
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种 将 模块 与 化 学 类 比 的 方法 ， 成 了 我 们 共同 的 参 孝 。 


不 过 值得 注意 的 是 ， 原 子 设计 (或 任何 其 他 方法 ) 可 能 无 法 让 
你 开 箱 即 用 。 在 FutureLearn， 我 们 曾 对 如 何 定义 “模板 ”和 
- 页面” 的 用 法 而 感到 纠结 。 因 为 ， 团 队 成 员 倾 癌 于 定义 较 小 
的 元 素 ， 以 便 灵 活 地 组 合 它们 。 


更 可 怕 的 是 ， 我 们 伦 了 过 多 的 时 间 来 讨论 某 些 东 西 到 底 古 分 子 
还 是 有 机 体 。 团 队 成 员 看 不 到 这 两 者 之 间 有 足够 大 的 区 别 ， 因 
此 干脆 将 它们 合并 了 。 最 终 ， 我 们 只 有 两 个 等 级 : 原子 和 分 子 。 


将 功能 性 模式 划分 成 两 种 以 上 的 层级 ， 容 易 让 人 感到 困惑 。 
不 过 ， 将 粒度 较 小 的 元 素 与 较 复 杂 的 元 素 区 分 开 还 是 有 意义 
的 一 一 无 论 是 对 模式 库 还 是 对 代码 都 古 如 此 。 无 论 是 否 采 用 原 
子 设计 的 术语 ， 很 多 团队 都 不 同 程度 地 这 样 做 了 ( 见 表 10-2)。 


表 10-2 很 多 团队 都 不 同 程度 地 将 粒度 较 小 的 元 素 与 较 复 杂 的 元 
素 区 分 开 了 


Cam | 动 | | 
[CT 


Wap af | 


一 个 有 趣 的 现象 是 ， 设 计 体 系 的 严格 性 (在 第 6 章 里 讨论 过 ) 
也 反映 在 模式 库 的 结构 上 。 模 式 的 粒度 越 低 ， 设 计 体 系 就 越 松 
散 和 灵活 。 


比较 严格 的 设计 体系 (如 Airbnb 的 DLS 和 GE 的 Predix) 会 定义 
比较 大 的 模式 : 用户 流 、 模 板 和 页 面 。 而 像 TED 和 FutureLearn 
的 设计 体系 则 会 定义 比较 小 的 部 件 ， 为 设计 师 留 下 根据 自身 需要 
对 它们 进行 组 合 的 空间 。 


模 或 库 


3. 按 目的 或 按 结构 进行 组 织 


在 FutureLearn， 我 们 尝试 过 多 种 组 织 模块 的 方法 : 单独 一 个 长 
列表 、 按 层级 结构 组 织 (遵循 原子 设计 方法 )、 根 据 在 页 面 上 
的 角色 进行 组 织 《开篇 ”“ 结 尾 ” 英雄 ”“ 桥梁 )。 但 这 些 方 
法 不 是 太 严 格 ， 就 是 太 复杂 ， 总 之 无 法 使 用 。 


经 过 两 年 的 摸索 ， 我 们 最 后 决定 按 目 的 对 元 素 进 行 分 类 ， 如 促 
销 模 块 、 鼓 励 学 习 者 进步 的 模块 、 同 用 户 沟 通 的 模块 、 社 交 模 
块 等 ( 见 图 10-4)。 


Fj :i: COREPATTERNS (® ATOMS ” 八 MOLECULES 


Promotional Learner progress Nav & user actions Social 
Billboards Quiz progress nav Action button groups Comments 
Boombox Run progress nav Header Sharing links 
Footer promo Week progress Navigation elements Sharing section 
Promo banner 

Explanation System messages Text/content blocks 
Signpost 

Brackets Feedback messages Cards 
Spotlight 

Formula Motivational Course blocks 
Testimonial placeholder 

Standfirst Information units 
Whisperbox Splash 


Text highlight 


Understanding Glimate Change 


15 courses 


10-4 ”FutureLearn 模式 库 里 按 目的 分 类 的 模块 

按 日 的 组 织 模 式 ， 还 可 以 就 一 个 模块 可 以 用 在 什么 地 方 ， 对 团 
以 成 员 进 行 31| 导 、 局 发 。 这 种 结构 也 与 我 们 定义 模式 时 所 用 的 
目标 导 同 的 方法 是 契合 的 。 


在 Shopify 的 Polaris 设计 体系 中 ， 组 件 则 是 根据 团队 的 心智 模 
型 进行 分 类 的 。 最 初 的 分 组 正 是 因为 一 次 使 用 开放 式 卡 请 分 类 
方法 的 可 用 性 测试 。 
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即使 不 同 领域 的 人 很 难 达成 完全 一 致 的 意见 ， 团 队 里 的 用 户 研 
究 工 作 也 会 不 断 地 影响 模 却 的 组 织 方式 : 


设计 师 更 多 地 考虑 结构 ， 开 发 人 员 更 关心 功能 ， 内 容 策 略 分 析 
师 则 倾向 于 将 两 者 结合 起 来 ( 见 图 10-5)。 我 们 正在 进行 一 系 
列 可 用 性 研究 ， 以 了 解 当 前 的 组 件 分 组 方式 的 有 效 程 度 。 

Selene Hinkley，Shopify Polaris 的 内 容 策 略 分 析 师 


> 
A shopify PRINCIPLES CONTENT VISUALS COMPONENTS RESOURCES 
Search components 


国 ] Rhee Vi oman Components 


OO ACTIONS Our components are a collection of interface elements 


that can be reused across the Shopify system. 


10-5 ”Shopify Polaris 中 的 组 件 是 按 结构 和 功能 排列 的 


以 上 只 是 对 模式 进行 组 织 的 一 些 方法 。 重 要 的 是 ， 计 择 什么 样 
的 方法 取决 于 使 用 它 的 人 是 怎么 想 的 。 要 找到 适合 你 团队 的 结 
构 。 如 采 效 果 不 好 ， 或 者 团队 成 员 还 在 痛 吉 地 寻求 改变 ， 就 继 
续 去 学 试 其 他 的 方法 吧 。 这 可 能 需要 伦 不 少时 间 。 即 便 是 在 那 
些 模 却 库 运 转 得 很 有 效 的 团队 里 ， 我 听 到 的 最 多 的 一 句 话 也 十 
工作 永远 都 做 不 完 。 


Q) 出 自 2017 年 8 月 与 Shopify 用 户 体验 主管 Amy Thibodeau 的 电子 邮件 沟通 。 


模 或 库 


10.3 模式 文档 


尽管 每 个 模式 下 面 都 能 编写 很 多 内 容 ， 但 想 要 立刻 钵 盖 所 有 内 
容 征 不 现实 的 ， 万 其 是 对 于 小 团队 而 言 。 


为 了 更 快 地 看 到 模式 库 的 实际 好 处 ， 可 以 先 对 主要 模式 进行 倍 
要 概述 。 有 了 简单 的 基础 之 后 ， 随 时 可 以 添加 团队 需要 的 功能 
特性 和 信息 ， 提 升 模 式 库 。 下 面 是 为 功能 性 模式 和 怀 知 性 模式 
编写 文档 时 需要 考虑 的 一 些 问 题 。 


10.3.1 为 功能 性 模式 编写 文档 
为 了 让 文档 聚焦 ， 易 于 扫 读 ， 可 以 从 以 下 基础 内 容 开 始 : 


口 名 称 
D 目的 
口 示 例 〈 含 视觉 示例 和 代码 示例 ) 
D 变 体 


1. 名 称 


在 整 本 书 中 ， 我 一 直 在 强调 精心 挑选 名 称 的 重要 性 。 好 的 名 称 
应 该 是 聚焦 的 、 令 人 难忘 的 ， 并 能 体现 模式 的 目的 。 理 想 情 况 
下 ， 其 他 人 应 该 能 在 不 看 解释 说 明 的 情况 下 ， 通 过 名 称 看 出 模 
式 的 目的 。 为 了 方便 扫 读 ， 名 称 应 当 突 出 显示 ， 与 其 他 内 容 有 
所 区 别 〈 见 图 10-6)。 
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Ce Progress Indicator 


Code Usage Style 


Accessibility 
Content 
Bluemix Brand 
Principles Progress Indicator is a visual representation of a users progress through 
a set of steps. They guide the user through a number of steps in order to 


Style 
complete a specified process. 
Colors 
Grids 
Iconography 
Layer 
Motion O————©® 全 全 
Typography Label1 Label 2 Label 3 Label 4 
Components 
Accordion View full render 
Breadcrumb 
1 <ul data-progress data-progress-current class="bx-—progress"> 号 
Button <li class="bx—progress-step bx—progress-step——complete"> 
Card 3 <svg Width="24px" height="24px" viewBox="0 8 24 24"> 
4 <cCircle cx="12" cy="12"” r="12"></circle> 
Checkbox 5 <polygon points="10.3 13.6 7.7 11 6.3 12.4 10.3 16.4 17.8 9 16.4 7.6"></ 


10-6 在 IBM 的 Carbon 设计 体系 中 ， 突 出 显示 了 模式 的 名 称 
2. 目的 


训 览 模式 库 的 时 候 ， 大 多 数 人 会 略 过 描述， 尤其 站 篇 幅 较 长 的 
搬 述 。 这 就 是 文档 需要 聚焦 、 让 重点 突出 的 原因 。 通 第 ， 要 人 解 
释 模 式 是 什么 、 有 什么 用 ， 一 两 个 句子 就 够 了 


虽然 这 上 听 起 来 很 和 洽 单 ， 但 在 实践 中 ， 想 要 人 和 集 明 扼要 地 讲 清楚 模 
式 的 目的 并 非 易 事 。 我 们 经 常 给 出 模糊 的 描述 ， 这 没有 多 大 实 
际 的 价值 。 


看 看 Sipgate 团队 了 最初 是 如 何 描述 名 为 “橱窗 ”(Showcase) 的 
组 件 的 : 


使 用 橱窗 展示 多 种 基于 媒体 文件 的 信息 。 


管 这 句 话 准确 无 误 ， 但 它 并 没有 传达 出 “橱窗 ”的 目的 ， 因 
ie na 
义 模 式 的 目的 ， 并 为 其 撰写 说 明 。 下 面 是 他 们 这 样 做 之 后 的 男 
一 个 例子 。 


模式 库 


事实 网 格 (Fact Grid) 是 一 种 短小 的 列表 ， 用 于 列 出 事实 或 其 
他 一 些 有 趣 的 信息 。 使 用 事实 网 格 可 以 让 访问 者 对 即将 看 到 的 
内 容 快 速 地 建立 印象 。 


第 二 种 描述 在 表达 模式 的 用 途 方面 更 加 有 效 。 当 你 读 完 这 两 名 
话 ， 你 其 至 可 以 想象 出 “事实 网 格 ” 的 样子 。 


此 外 ， 关 于 以 最 有 效 的 方式 表达 模式 的 目的 ， 还 有 一 些 设计 
和 内 容 上 的 建议 ， 如 “每 个 事实 最 多 三 行 “最 多 12 个 事实 
( 见 图 10-7)。 如 果 能 跟 有 内 容 领 域 背 景 的 人 一 起 合作 定义 这 些 
内 容 ， 将 是 非常 有 用 的 。 


Zahlen & Fakten 


| pn A a 


Null 
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10-7 ”Sipgate 的 事实 网 格 
3. 示例 


好 的 示例 能 增强 读者 对 模式 目的 的 理解 。 在 Marvel 的 样式 指责 
( 见 图 10-8) 中 便 有 大 量 示例 ， 展 示 不 同 的 变 体 和 有 用例。 在 模 
式 中 包含 用 户 界面 的 示例 能 让 指南 更 加 实用 。 


lam a normal popover and | can have 
text and everything 


lam a normal popover and | can have 
Click me! Click me 5 Click mel 
text and everything 


Top popover Right popover Bottom popover Left popover 


图 10-8 在 Marvel 的 样式 指南 里 ， 很 容 掏 看 出 不 同 气 泡 弹 框 的 样 
式 差 异 
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不 好 的 示例 会 影响 对 目的 的 传达 。FutureLearn 模式 库 里 “广告 
牌 ”模式 〈 见 图 10-9) 所 用 的 示例 表现 不 出 它 是 一 个 “突出 的 
促销 元 素 ”。 如 果 对 它 进行 一 些 修 改 ， 比 如 更 换 默认 文 字 和 痛 
景 图 片 ， 束 能 更 清楚 地 传达 其 目的 。 


Headline 


Heading 


Message 


Button 


图 10-9 ”FutureLearn 模式 库 里 的 “广告 牌 ”模式 没有 表现 出 其 本 
来 的 目的 


最 好 能 为 模式 的 示例 配 上 代码 ， 这 样 便 能 表现 啊 应 方式 、 交 互 
方式 和 动画 效 末 ， 从 而 以 “ 活 ”的 方式 择 现 模 式 。 不 过 ， 在 麻 
些 情况 下 ， 静 态 图 和 GIF 图 更 实用 ， 特 别 征 当 你 要 展示 茶 种 
“ 活 ” 的 示例 中 无 法 创建 的 特定 行为 时 〈 见 图 10-10)。 


模式 库 


Account photo 


Only .jpgand .png files. 500kb max file size. 


Add files 


photo.png x] 


Carbon-ComponentsDocumentation_final1.0-version2.0.1_FINALv21-optionAB... x] 


“photo.png” exceeds size limit 


500kb max file size. Please select a new file and try again. 


10-10 ”Carbon 同时 使 用 “ 活 ” 的 示例 和 静态 示例 来 说 明 特定 的 
行为 


把 模式 鸭 各 个 变 体 一 同 展示 出 来 ， 形 成 套件 ， 能 让 人 对 模式 的 
内 容 一 目 了 然 。 不 仅 如 此 ， 我 们 还 需要 知道 不 同 的 选项 到 的 有 
哪些 不 同 。 


尽管 Office 的 Fabric 前 端 框架 呈现 了 所 有 的 变 体 〈 见 图 10-11)， 
却 没有 解释 它们 之 间 的 差异 。 


网 Links of tab style 
Variants 
Basic example 
图 Bar Bas Biz 
“/» Show code 
Pivot #1 


MyfFiles Recent Shared with me 


Pivot #1 Links of large tab style 


Count and Icon 
图 Bar Bas Biz 
cpP Show code 


Pivot #1 


四 MyFies(42) OC) BO Qsharedwithme{(1l) BCustomized Rendering (10 字 


Pivot #1 Trigger onchange event 


10-11 Office Fabric 前 端 框 架 的 文档 


179 


180 第 10 章 


相 比 之 下 ，Carbon 则 清楚 地 对 每 个 变 体 的 用 途 做 了 说 明 〈 见 


图 10-12 ) 。 
TYPE PURPOSE 
Range Date Picker To select a range of dates, accompanied by a calendar widget. 
Single Date Picker When a user needs to select one date, accompanied by a 
calendar widget 
Simple Date Picker When the date is known by the user, and they don't need a 
calendar to anticipate the dates. 
Range Date Picker Single Date Picker 
Depart Arrive Deploy date 
/但 /2016 mm/zod/yyyy 上 首 首 1/ 19 /2016 
Simple Date Picker 
< NOV 2016 > < NOV 2016 > 
5s M TT W mh F 3s 8 Expiration 
mm /yyyy 
20 21 回 20 21 
22 2 交 2 和 227 站 2 23 24 25 2 27 28 
29 30 3 ; 6 29 30 1 


图 10-12 ”Carbon 的 文档 解释 了 日 期 选择 器 的 不 同类 型 及 它们 之 间 
的 差异 


类 似 地 ，Atlassian 的 设计 指南 ( 见 图 10-13) 也 描述 了 什么 时 
修 该 用 什么 类 型 的 按钮 (尽管 从 我 的 角度 来 看 ， 某 些 文字 还 
可 以 更 精确 一 些 ， 如 “ 当 你 没有 任何 东西 需要 证 明 时 可 使 用 
此 模式 ”)。 


Button 


Label only 


二 


Icon and label 


st Subtle 


Disabled button 


Split ~ 
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Variation 


The most general use case. Use when you have nothing to 
prove. 


Use when you want to draw more attention to the button, or 
when an icon helps to convey more meaning. 


Icon only - Use when space is constrained and the function of 
the button is obvious. A button with a label is preferred over 
this approach. 


Use when a toolbar or standard buttons would draw attention 
away from more important content. lt is often used at the top of 
apage or section and must use an icon and label. 


Use when another action has to be completed before the 
button is usable, like changing a field value or waiting for a 
system response. Use only with primary and standard button 
types. 


A button with an attached drop menu of related actions. The 
labelled section shows the 80% use case action for easy 
access, While the attached menu shows a list of related actions 
(including the one shown on the button). 


10-13 Atlassian 设计 指南 中 对 按钮 各 种 变 体 的 解释 
还 有 其 他 很 多 方面 对 模式 文档 也 很 重要 ， 举 例如 下 。 


口 组 件 的 版 本 控制 。 如 有 果 模 式 库 所 支持 的 产品 有 重大 升级 ， 那 
么 ， 将 相关 API 或 UI 元 素 较 之 旧版 的 变更 记录 下 来 ， 对 某 
些 组 件 来 说 是 很 有 必要 的 。 对 于 元 素 的 改版 也 是 如 此 。 


口 团队 成 员 。 将 参与 模式 构建 的 人 员 名 单列 出 来 ， 就 像 Sky 的 
Toolkit 所 做 的 那样 ( 见 图 10-14)。 这 会 给 人 们 一 种 主人 合 
的 感 完 ,也 有 助 于 模式 库 未 来 的 发 展 。 


Contributors 


@@aew 


10-14 参与 Sky 的 Toolkit 构建 的 人 员 
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D 相关 模式 。 在 Shopify 的 Polaris， 如 果 你 看 到 的 模式 不 是 你 
想 找 的 ， 它 所 列 的 相关 模式 ( 见 图 10-15) 可 能 就 有 作用 了 。 
这 样 做 能 降低 模式 重复 的 概率 。 


NOT WHAT YOU'RE LOOKING FOR? 


To group similar concepts and tasks together, use the card component. 
To create page-level layout, use the layout component. 


To explain a feature that a merchant hasn't tried yet, use the empty state component. 
10-15 ”Shopify 的 Polaris 上 列 出 的 相关 模式 


根据 团队 的 需求 ， 还 可 以 包含 很 多 其 他 的 信息 。Vitaly Friedman 
在 他 的 文章 Taking The Pattern Library To The Next Level 中 分 享 
了 两 个 清单 : 一 个 是 需要 记录 的 模式 的 清单 ， 一 个 是 每 个 模式 
需要 包含 的 内 容 的 清单 。 


10.3.2 ”为 感知 性 模式 编写 文档 


在 为 感知 性 模式 编写 文档 时 ， 应 该 关注 构件 一 一 调 色 板 、 排 版 
比例 ， 等 等 。 不 过 ， 正 如 我 们 在 第 9 草 中 所 看 到 的 ， 了 解 如 何 使 
用 这 些 属 性 、 如 何 组 合 它们 ， 也 很 重要 。 下 面 是 一 些 提示 和 示例 。 


1. 指定 用 法 ， 而 不 仅 是 构件 本 映 


关于 颜色 的 说 明 不 仅 限 于 颜色 值 的 列表 。 英 国政 府 网 站 的 样式 指 
南 说 明了 如 何 指定 文本 、 链 接 、 背 景 等 元 素 的 颜色 ( 见 图 10-16)。 


Text Links Backgrounds Buttons Focus 
#0BOCOC #005EA5 #BFCIC3 #00823B #FFBF47 
$text-colour $link-colour $border-colour $button-colour $focus-colour 
#6F777B #2B8CC4 #DEEOE2 #006435 
$secondary-text-colour $link-hover-colour $panel-colour $green (hover colour) 


10-16 闫 国 政府 网 站 样式 指责 在 其 调 色 板 中 显示 了 各 种 模式 的 
颜色 
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“应 该 与 不 应 该 ”(dos and don'ts) 的 格式 也 很 有 用 ， 特 别 是 有 
可 能 产生 误 用 的 时 候 。 在 Shopify 的 Polaris 中 ， 衣 蓝 (indigo) 
和 蓝 色 (blue) 都 是 用 于 交互 元 素 的 主要 颜色 。 该 设计 规范 明 
确 指 出 ， 不 应 该 将 蓝 色 用 于 按钮 。 因 为 如 果 不 指出 这 一 点 的 
话 ， 很 有 可 能 会 有 人 这 样 做 〈 见 图 10-17)。 


Color Usage 


The following is a set of specific guidelines for when and how to use each color in 
our palette. 


[oj Do © Don't 


Use blue for information pips Use blue for buttons 


Use blue for text links 


10-17 ”Shopify 的 Polaris 中 “应 该 与 不 应 该 ”的 格式 


美国 政府 网 站 标准 的 排版 部 分 列 出 了 各 种 字体 搭配 及 其 推荐 用 
法 ( 见 图 10-18) ， 旁 边 的 示例 则 展示 了 对 应 的 包含 上 下 文 的 排 
版 处 理 。 


Default: Merriweather headings, Source Sans Pro body (lite) 十 
Merriweather headings, Source Sans Pro body (robust) 一 
Avariation of the previous font pairing, expanded to include an PAGE PERFORMANCE 

additional Merriweather weight. The slimmer Merriweather headings 

creates an elegance that compliments weights and allows you to MEDIUM 


intentionally move users’ attention around a page. Exceeds ideal number of fonts by 


one. May negatively impact page 
load performance. 


Recommended applications: text heavy sites and more visual 
promotional sites. 


10-18 ”美国 政府 网 站 标准 包含 了 字体 配对 及 其 推荐 用 法 
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2. 交叉 引用 样式 


尽管 我 们 为 了 使 用 方便 ， 把 样式 和 组 件 分 开 了 ， 但 在 实践 中 它 
们 是 密切 相连 的 。 在 模块 级 别 引 用 样式 ， 或 单独 引用 样式 ， 都 
是 很 有 用 的 (即便 会 产生 重复 )。 按 钮 有 很 多 样式 属性 ， 如 颜 
色 、 形 状 、 间 距 、 标 签 页 文字 的 样式 、 交 互 时 的 过 渡 效 采 等 
同时 ， 其 中 一 些 样式 属性 又 可 以 用 于 其 他 对 象 ， 如 玉 单 、 链 接 、 
切换 控件 等 。 共 至 样式 会 让 人 感 完 这些 对 象 是 属于 同一 体系 的 。 


在 Carbon 中 ， 模 块 的 样式 (如 颜色 ) 显示 在 单独 的 标签 页 里 
同时 ， 颜 色 的 用 法 也 在 单独 的 标签 页 里 (如 图 10-19 ) 。 


COMPONENT STYLE 


Usage Style Swatches Usage 
Color Color roles 
ATTRIBUTE 8css9 HEX VARlaBLE RoLE/s 
Normal Sbrand-01 #3d70b2 留 brand-01 Primary bral nd #3d70b2 ”图 
nteractive text 
Primary icon color 
Primary:hover Sbrand-02 #5596e: El Border highiight 
phasis background 


Disabled S$brand-01 #3d70b2 at 50% opacity 


图 10-19 在 Carbon 中 ， 不 仅 模 块 层 面 会 引用 颜色 ， 各 个 层级 都 
会 引用 颜色 


再 举 一 个 例子 : 交互 状态 。 通 常 ， 我 们 只 会 在 模块 级 别 的 文档 
里 看 到 它们 : 这 是 一 个 按钮 及 莫 停 状态 的 样式 。 但 是 ， 如 琳 能 
一 目 了 然 地 看 到 所 有 状态 ， 也 征 很 有 用 的 。 辅 助 性 链接 的 悬 售 
状态 样式 是 怎样 的 ? 图 标 按钮 呢 ? “幽灵 ”按钮 呢 ? 标签 页 控 
件 呢 ? 同和 祥生 大 停 效 末 ， 为 什么 有 时 候 生 增加 一 线 外 框 线 ， 有 
时 候 是 改变 背景 颜色 呢 ? 


在 FutureLearn， 我 们 用 一 个 表格 显示 交互 状态 的 总 体 规则 ( 见 
表 10-3)。 当 我 们 添加 新 的 交互 元 素 时 ， 也 能 应 用 这 套 规 则 。 


模式 库 


表 10-3 7 集中 显示 的 


普通 。 | 。 最 标 是 人 


选 选中 
Edit profile Edit profile Edit profile Edit profile -I 


3. 显示 元 素 之 间 的 关系 


有 效 的 感知 性 模式 都 是 相互 关联 、 协 作 运 行 的 。 为 了 让 整个 设 
计 体 系 更 加 连贯 统一 ， 需 要 将 元 素 之 间 的 关系 显示 出 来 ， 如 颜 
色 之 间 的 关系 、 排 版 和 间距 之 间 的 关系 、 话 气 语 调 与 视觉 效果 
之 间 的 关系 ， 等 等 。 


同样 的 颜色 ， 如 果 以 不 同 的 比例 呈现 ， 效 果 可 能 完全 不 同 。 
Michael McWatters 曾经 指出 ， 如 果 在 TED 网 站 上 使 用 大 多 的 红 
色 或 太 少 的 红色 ， 都 会 让 人 感觉 这 不 是 TED， 而 是 其 他 的 品牌 。 
Open Table 样式 指南 (如 图 10-20) 便 对 颜色 做 了 层次 划分 


DINER RESTAURANT 


10-20 ”Open Table 样式 指南 
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排版 和 间距 也 是 密切 相关 的 。 字 写 大 、 对 比 强 烈 的 排版 便 需 要 
更 多 的 留 白 。 如 来 文字 变 小 ， 却 不 减 小 则 距 ， 这 些 文字 就 会 显 
得 极 不 协调 。 即 便 只 有 少量 几 种 预 设 的 间距 可 供 选 择 (如 8px、 
16px)， 不 同 的 设计 师 也 可 能 有 不 同 的 偏好 一 一 有 些 人 喜欢 宽 

的 留 白 ， 有 些 人 则 正好 相反 。 在 这 种 情况 下 ， 间 距 的 值 可 能 厦 
一 致 的 ， 但 视觉 上 的 密度 并 不 统一 。 


在 FutureLearn， 为 了 对 产品 的 密度 和 对 比 程 度 进行 指引 ， 我 们 
试图 这 样 定义 排版 和 间距 之 间 的 关系 。 


口 宽大 型 模块 ( 见 图 10-21) 具有 较 高 的 排版 对 比 度 (标题 字 
号 与 正文 字号 的 比率 较 大 ) 和 宽大 的 留 白 (以 平衡 高 对 比 度 
的 排版 )。 

D 常规 型 模块 占 大 多 数 ， 它 们 具有 默认 的 标题 大 小 和 间距 。 

口 紧凑 型 模块 ( 见 图 10-21) 的 标题 字号 仅 略 大 于 正文 。 


宽大 型 紧凑 型 
排版 对 比 度 : 高 (Yotta+ Uno) 2 排版 对 比 度 : 低 (Mega+Uno) 2” 
留 白 : 宽大 留 白 : 较 小 

ES 到 


我 们 通常 将 宽大 型 用 于 宣传 性 质 的 内 容 ， 我 们 通 第 将 紧 竣 型 用 于 支持 性 质 的 内 容 ， 
从 而 让 它们 在 页 面 中 特别 突出 。 例如 内 容 提要 、“ 聚 光 灯 ””。 


10-21 ”FutureLearn 里 的 一 些 区 块 类 型 


GO Yotta、Mega、Uno 是 作者 借用 表示 数量 级 的 英语 词 头 为 不 同 字 号 的 命 
名 ， 参 见 图 9-2。Yotta、Mega、Uno 对 应 的 字号 依次 递减 ， 因 此 Yotta 
和 Uno 字号 差距 较 大 ，Mega 和 Uno 字号 差距 相对 较 小 。 译 者 注 

@) 参见 广 解 @ 〇 。 

G@) 在 作者 的 公司 ,“ 聚 光 灯 ” 指 的 是 一 种 吸引 用 户 关 注 特 定 内 容 的 元 素 ， 
参见 图 5-2。 译 者 注 


模 或 库 


这 些 设 管 也 反映 了 模块 的 用 途 。 影 啊 力 强 的 促销 部 分 需要 使 用 
对 比 度 高 的 排版 样式 。 相 反 ， 文 持 性 模块 则 往往 采用 紧 竣 型 的 
排版 样式 .。 


如 今 ， 绝 大 多 数 的 模式 库 将 样式 放 在 不 同 的 页 面 里 。 我 认为 这 
样 做 是 有 局 限 性 的 。 或 许 下 一 代 的 模式 库 将 以 更 具 关 联 性 的 方 
式 呈 现 样 式 .。 


同情 绪 板 和 元 素 拼 贴 一 样 ， 样 式 也 应 该 以 一 种 能 表现 其 相互 关系 
的 方式 呈现 ， 应 该 突出 标志 性 模式 ， 突 出 各 种 元 素 之 间 的 关系 。 


10.4 ”工作 流程 


那些 拥有 有 效 模式 库 的 团队 ， 通 常 也 拥有 系统 化 的 工作 流程 。 
当然 ， 每 家 公司 的 情况 都 有 所 不 同 。 像 Airbnb 这 样 的 团队 就 拥 
有 严格 、 精 确 的 流程 和 强大 的 工具 ， 其 他 团队 则 没 那 么 正式 .。 


10.4.1 ”添加 新 模式 的 过 程 


如 何在 设计 体系 中 添加 新 的 模式 ， 是 需要 在 团队 内 部 达成 共识 的 
一 项 重要 内 容 。 对 此 ，Nordnet 的 团队 遵循 一 个 简单 的 三 步 法 2。 


(1) 将 设计 稿 提交 到 Dropbox 里 的 “UI 工具 箱 ” 文 件 夹 。 

(2) 整个 团队 一 起 用 Trello 讨论 新 模式 的 引入 。 

(3) 对 UI 工具 箱 里 的 设计 编写 说 明 。 将 新 设计 放 入 模式 库 之 
后 ， 它 将 自动 推送 到 团队 所 有 人 前 面 。 


团队 成 员 每 两 周 开 一 次 会 ， 讨 论 新 提交 的 内 容 。 通 过 审阅 Trello 
里 的 讨论 内 容 ( 见 图 10-22)， 决 定 是 把 模块 放 和 文档， 还 是 将 
其 存档 。 


(GD 参见 Ross Malpass 的 Super Easy Atomic Desieon Documentation with Sketch App. 
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Nordet UI Kit 


Success input - green label or not? 


1 
Add a card.,. 


10-22 ”Nordnet 团队 使 用 Trello 讨论 是 否 引 入 某 个 模式 


Shyp、FutureLearn 等 很 多 团队 都 采用 了 类 似 的 工作 流程 (Shyp 
使 用 GitHub 添加 和 审阅 模式 )。 这 个 过 程 不 一 定 要 很 严格 ， 但 
重要 的 是 要 强制 定期 对 模式 进行 评审 ， 无 论 用 什么 样 的 形式 。 


为 了 确保 提交 格式 保持 一 致 ， 一 些 团队 使 用 了 标准 横 板 。 这 
些 模板 都 带 有 简单 的 指示 ， 如 名 称 、 描 述 、 作 者 和 日 期 。 在 
FutureLearn， 填 好 的 内 容 是 直接 提交 到 模式 库 的 ， 而 不 是 先 放 
入 主 设计 文件 的 。 同 时 ， 关 于 编写 模式 描述 的 工作 ， 我 们 有 一 
个 非 正 式 的 指南 。 模 式 的 描述 由 三 个 问题 组 成 ， 它 是 什么 ?为 
什么 要 引入 它 ? 它 如 何 实现 目 己 的 目的 ? 


10.4.2 引入 新 模式 的 标准 


团队 里 一 个 第 见 的 问题 就 是 对 设计 模式 的 组 成 殉 围 难以 达成 一 
致意 见 。 为 了 解决 这 个 问题 ， 需 要 为 模式 的 引入 (以 及 更 新 和 
删除 ) 建立 共享 的 标准 。 


对 此 ， 两 种 最 为 钊 见 的 做 法 如 下 。 


模 或 库 


口 网 站 上 的 每 个 新 元 素 都 会 自动 地 添加 到 模式 库 里 。 如 果 你 们 
能 严格 地 控制 新 模式 进入 设计 体系 ， 那 么 这 种 方法 便 古 有 效 
的 。 为 此 ,应 该 有 一 个 流程 来 检查 相似 的 模式 是 人 否 已 经 存在 ， 
或 者 定 否 有 可 以 修改 的 现成 模式 。 例 如 ， 可 以 在 团队 苑 围 定 
期 对 新 模式 进行 评审 。 如 末 没 有 这 样 的 流程 ， 这 种 方法 就 有 
产生 重复 模式 的 风险 。 

D 只 有 当 元 素 被 复 用 时 ， 才 会 被 添加 到 模式 库 里 。 有 的 团队 只 
有 在 第 二 次 甚至 第 三 次 使 用 某 个 模块 的 时 候 ， 才 会 将 其 添加 
到 模式 库 里 。 这 样 做 的 逻辑 是 ， 在 把 元 素 添加 到 设计 体系 里 
之 前 ， 必 须 证 明 该 元 素 确 实 古 一 种 模式 。 这 有 助 于 你 持 模 式 
库 精 人 简 。 如 末 采 用 这 种 方法 ， 那 么 让 整个 团队 都 能 了 解 所 有 
正在 创建 的 内 容 并 开展 有 效 沟 通 ， 便 是 非 第 关键 的 。 此 外 ， 
还 应 该 为 沁 未 进入 模式 库 的 模式 留 下 注释 ， 这 样 ， 团 队 才 能 
完整 地 了 解 所 有 的 内 容 ， 包 括 那 些 还 没有 放 进 模式 库 里 的 
内 容 。 


也 可 以 根据 复 用 的 可 能 性 来 做 决定 。 在 FutureLearn， 我 们 将 组 
件 目 的 的 特殊 性 作为 一 项 指标 。 如 东 元 际 被 定义 得 很 通用 ， 那 
么 它 在 将 来 被 复 用 的 可 能 性 束 比 较 大 。 对 于 这 种 元 素 ， 我 们 会 
将 它 添加 到 模式 库 里 。 如 果 新 的 组 件 是 针对 特定 目的 的 (如 季 
方 性 促销 、 与 特殊 活动 相关 的 模块 等 )， 就 将 其 视 为 一 次 性 的 
元 乏 。 


根据 这 一 规划， 整个 团队 在 定义 组 件 时 都 要 特别 留心 ， 如 无 必 
要 ， 不 要 添加 只 为 特定 目的 而 产生 的 模块 。 如 末 有 人 要 51| 入 一 
次 性 的 组 件 ， 束 需要 问 其 他 所 有 人 解释 原因 。 万 一 有 人 发 现 该 
模块 对 他 们 也 有 用 ， 我 们 便 会 将 它 重新 定义 为 更 通用 的 模式 ， 
并 添加 到 模式 库 里 。 
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10.4.3 ”人 员 与 责任 


另 一 个 需要 芳 氏 的 方面 征 如 何 让 团队 里 的 人 参与 文档 的 更 新 ， 
尤其 是 在 没有 专门 负 贡 此 事 的 团队 的 情况 下 。 如 来 每 个 人 邦 可 
以 页 献 ， 束 必须 确保 他 们 的 页 献 部 被 添加 到 模式 库 里 了 。 例 
如 ， 将 组 件 添 加 到 模式 库 ， 可 以 是 创建 该 组 件 的 流程 中 的 一 
坏 ， 创 建 模式 的 设计 师 和 开发 人 员 人 负 贡 将 该 模式 添加 到 模式 库 
里 。 不 过 ， 正 如 我 们 在 第 6 革 中 看 到 的 ， 这 种 模式 并 不 适用 于 
每 个 团队 。 有 时 ， 即 便 每 个 人 都 能 为 模式 库 做 页 献 ， 也 需要 有 
一 个 人 或 一 小 组 人 专门 负 贡 策划 和 维护 模式 库 。 


如 琳 有 专门 的 设计 体系 团队 ， 便 需要 就 他 们 的 角色 及 管理 团队 
页 献 的 流程 达成 一 致 。 设 计 体系 团队 可 以 扮演 审 校 者 或 制作 者 
的 角色 ， 而 很 多 公司 也 会 将 两 者 结合 起 来 。 


口 审 校 者 。 组 织 中 的 每 一 个 人 都 可 以 为 新 模式 做 出 贡献 。 设 计 
体系 团队 负责 定义 组 织 内 部 成 员 如 何 提交 贡献， 包括 设置 要 
求 、 制 定 审 核 流 程 。 如 果 组 织 成 员 提交 的 模式 不 符合 标准 ， 
设计 体系 团队 会 豆 励 创建 它 的 设计 师 和 开发 人 员 进 行 修改 ， 
他 们 不 会 自行 修改 。Atlassian 用 的 是 这 种 方法 。 

D 制作 者 。 如 霖 用 这 种 方法 ， 则 大 多 数 模 式 邦 是 由 设计 体系 团 
队 创建 的 。 他 们 通 和 与 不 同 团队 的 产品 设计 师 芭 密 合 作 ， 举 
行 公开 讨论 会 ， 让 其 他 人 指出 问题 、 提 有 交 反 馈 或 提议 需要 新 
增 的 模式 。 设 计 体系 团队 接收 来 目 整 个 公司 的 提案 ， 但 他 们 
对 5 引入、 调整 或 删除 内 容 拥 有 最 终 决 定 权 。Airbnb 用 的 十 这 
种 方法 。 


选择 方向 的 时 候 ， 需 要 考虑 组 织 结 构 、 团 队 文化 和 特定 产品 需 
求 。 审 校 者 角色 通 弟 适合 结构 宽松 的 分 散 化 团队 ， 而 制作 者 角 
色 则 常见 于 更 为 严格 的 集中 化 体系 。 


无 论 选 择 哪 种 模式 ， 设 计 体系 团队 虱 应 该 被 视 为 合作 伙伴 ， 而 


不 是 警察 。 


模 或 库 


每 当 有 内 部 团队 开始 考虑 开发 新 的 模式 和 组 件 时 ， 我们 都 布 望 尽 
早 跟 他 们 一 起 合作 。 我 们 同 各 个 产品 团队 的 关系 应 该 是 一 种 伙伴 
关系 ， 而 不 应 该 是 有 人 在 一 边 做 了 大 量 工作 ， 而 我 们 只 能 选择 同 
意 或 不 同意 。 如 果 出 现 这 种 情况 ， 就 表示 我 们 的 工作 没有 做 好 。” 

一 一 Amy Thibodeau，Shopify 用 户 体 验 负 责 人 


10.4.4 ”统一 设计 体系 的 各 个 方面 


代码 、 设 计 和 模式 库 古 设计 体系 的 不 同方 面 。 兼 具 这 些 方面 的 设 
计 体 系 会 更 加 稳健 ， 因 为 这 样 的 设计 体系 涵盖 了 多 种 角度 的 内 容 。 
但 这 并 不 意味 着 模式 在 这 些 方 面 必须 完全 同步 。 重 要 的 是 团队 在 
各 个 方面 都 采用 相同 的 万 法 一 一 命名 、 结 构 、 对 目的 的 理解 。 


Carbon 设计 团队 试 着 让 Sketch 设计 工具 箱 、 组 件 库 和 代码 尽 可 
能 保持 一 致 〈 见 图 10-23 ) 。 
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Wm tooltip 


图 10-23 在 Carbon 设计 体系 中 ， 这 三 个 方面 的 命名 和 文件 夹 结 
构 都 是 一 致 的 


ss contig 


2 months ago 
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Nordnet 的 设计 师 使 用 原子 设计 的 方法 组 织 其 Sketch 工具 箱 中 
的 文件 夹 。 他 们 其 至 遵循 了 BEM 命名 规范 了 来 处 理 设计 文件 ， 
以 便 开发 人 员 和 设计 师 使 用 相同 的 语言 。” 


如 采 设 计 和 代码 在 概念 上 是 一 致 的 ， 它 们 之 间 的 同步 便 更 容易 
实现 ， 找 到 适合 你 们 工作 流程 的 工具 也 更 容 多 。 


10.5 工具 


保持 模式 库 与 生产 代码 同步 古 一 项 很 大 的 挑战 。 对 此 ， 不 同 的 
团队 用 着 不 同 的 方法 一 一 从 手动 的 复制 粘贴 ， 到 让 模式 库 成 为 
生产 环境 的 一 部 分 (如 Lonely Planet 的 Rizzo 便 是 这 样 做 的 )。 
有 很 多 工具 可 以 解决 这 一 问题 。 下 面 介 绍 了 一 些 很 受 欢 迎 的 
工具 。 


10.5.1 保持 模式 库 的 更 新 


最 容易 实现 的 工具 之 一 便 是 CSS 文档 解析 器 ， 如 KSS。 这 类 
工具 的 工作 原理 都 是 类 似 的 : 在 CSS 中 用 注释 对 元 素 进 行 描述 
(可 以 用 程序 将 摘 述 提取 到 文档 ) ;运行 脚本 ， 生 成 展示 在 模式 
库 里 的 标记 。 这 样 的 解析 工具 相对 人 简单， 但 功能 有 限 。 它 们 还 
有 可 能 导致 重复 标记 ， 从 而 加 大 维护 成 本 。 


更 为 踢 大 的 工具 是 样式 指责 生成 蔡 ， 如 Brad Frost、Dave Olsen 
和 Brian Muenzenmeyer 制作 的 Pattern Lab。Pattern Lab 有 很 多 
有 用 的 功能 ， 如 啊 应 式 预 蜗 、 多 语言 支持 。 它 适用 于 拥有 多 个 
模板 的 大 型 网 站 ， 特 别 是 那些 采用 原子 设计 方法 的 网 站 。 


(GD BEM 即 块 (block)、 元 素 (element) 和 修饰 符 (modifier)， 是 一 种 严 
格 的 前 端 命名 方法 。 译 者 注 
@) 参见 Ross Malpass 介绍 Nordnet 内 部 原子 设计 工作 流程 的 文章 。 


模 或 库 


Mark Perkins 的 Fractal 则 古 一 种 灵活 的 轻 量 级 工具 ， 它 也 越 来 
越 受 欢迎 。Fractal 用 于 构建 模式 库 ， 制 作 相 应 的 文档 ， 并 将 它 
们 集成 到 项 目 中 去 。 它 的 一 个 主要 优点 便 是 灵活 一 一 Fractal 可 
以 兼容 任何 模板 语言 和 组 织 结构 。 


保证 模式 库 和 代码 之 间 完 全 同步 是 非常 难 的 。 不 同 公司 实现 这 
种 同步 的 程度 并 不 一 样 ， 不 同 团 队 对 待 同 步 工 作 的 优先 级 也 各 
不 相同 。 


少量 的 不 同步 总 是 有 的 。 太 过 完美 反而 不 真实 。 同 任何 语言 一 
样 ， 我 们 的 设计 语言 也 在 不 断 地 发 展 。 我 们 会 修改 细节 、 会 添 
加 模式 。 我 们 会 不 断 地 打磨 产品 。 因 此 ， 在 任何 一 个 时 间 点 都 
有 多 个 版 本 的 设计 语言 。 我 们 接受 这 一 事实 ， 并 设计 出 一 个 可 
以 兼容 这 些 不 完美 之 处 的 设计 体系 。 

Jiirgen Spangl，Atlassian 公司 设计 负责 人 


对 于 严格 的 设计 体系 和 集中 式 的 组 织 ， 这 种 同步 极为 重要 ， 而 
结构 较为 宽松 的 公司 则 更 能 接受 不 同步 的 情况 。 


10.5.2 ”保持 主 设计 文件 的 更 新 


目前 ， 实 施 系统 化 方法 的 设计 师 团队 倾 癌 于 使 用 Sketch 作为 他 
们 的 主要 工具 〈 这 在 很 大 程度 上 要 归功 于 Sketch 的 文本 样式 、 
符 喜 、 画 板 等 功能 ， 这 些 功能 似乎 非常 适用 于 设计 体系 的 工作 
流程 )。 团 队 通 首 有 一 个 主 文件 ， 其 中 包 舍 一 个 UI 工具 箱 ， 工 
具 箱 里 包含 的 则 是 部 分 或 全 部 核心 组 件 及 样式 。 产 品 设计 师 倾 
加 于 使 用 目 己 的 文件 ， 并 根据 需要 从 主 文件 中 提取 元 素 。 


要 确 你 主 文件 里 的 模式 一 直 古 最 新 的 ， 这 定 一 件 有 挑战 的 事 。 
有 很 多 工具 可 以 帮 我 们 实现 这 一 目标 一 一 从 轻 量 级 的 工具 到 全 
面 的 解决 方案 。 


193 


194 


第 10 章 


Abstract 是 设计 文件 的 版 本 控制 中 心 。 你 可 以 创建 分 支 、 提 交 
设计 尝试 、 合 并 修改 内 容 。 通 过 Abstract， 你 可 以 很 轻松 地 让 
设计 文件 (包括 主 UI 工具 包 ) 保持 单一 的 事实 来 源 。 

男 一 个 流行 的 工具 是 Invision 的 Craft。Craft 是 一 套 Sketch 插 


件 ， 它 能 将 UI 工具 包 与 安 疼 了 该 插件 的 任何 人 同步 。 用 Craft 
生成 的 模式 库 可 以 你 存在 Dropbox 上 。 


还 有 一 些 更 为 全 面 的 工具 ， 如 UXPin、Brand.ai、Lingo 等 。 使 
用 这 些 工 具 ,， 便 能 在 不 写 代码 的 情况 下 创建 和 管理 模式 库 。 当 
然 ， 这 也 会 导致 失去 定制 模式 库 的 灵活 性 。 不 过 ， 它 们 中 的 
很 多 也 有 不 少 有 用 的 功能 ， 例 如 展示 组 件 的 交互 效果 ， 通 过 
Sketch 插件 实现 文档 的 同步 更 新 ， 与 Slack 集成 以 实现 模式 库 
更 新 的 通知 ， 等 等 。 


10.5.3 ”将 模式 库 作为 求 真 来 源 


如 果 让 模式 库 作 为 “ 求 真 来 源 ”， 那 么 在 一 些 公 司 里 ， 保 持 主 
UI 工具 箱 始 终 最 新 就 变 得 不 那么 重要 了 。 在 FutureLearn， 主 
Sketch 文件 (通过 GitHub 更 新 和 共享 ) 仅 包 含 不 常 改动 的 核 
心 元 素 ( 排 版、 按钮 、 导 航 等 )。 


设计 师 将 模式 库 作为 最 新 模式 的 主要 参考 来 源 ， 而 Sketch 或 
Photoshop 则 主要 用 于 探索 性 工作 。 由 于 大 多 数组 件 部 有 名 称 
和 定义 ， 因 此 团队 可 以 更 多 地 使 用 纸 质 草图 ， 不 需要 详细 的 设 
计 规格 说 明 。 


由 于 设计 体系 和 模式 库 的 出 现 ， 设 计 工 作 和 工程 工作 的 流程 变 
得 更 加 融合 了 。 在 这 个 领域 产生 了 很 多 试验 ,例如 直接 根据 网 
页 生成 Sketch 文件 的 工具 、 寻 入 实际 数据 的 工具 ， 等 等 。 在 不 
入 的 将 来 ， 我 们 可 能 不 用 再 担心 UI 工具 箱 的 同步 问题 了 ， 
为 那 时 我 们 可 能 可 以 随时 基于 模式 库 生 成 UI 元素。 


模 或 库 


10.6 ”模式 库 的 未 来 


工具 应 该 能 适应 整个 团队 的 目 然 工作 流程 。 只 有 这 样 ， 团 队 里 
的 每 个 人 才 会 具有 主动 性 ， 大 家 对 模式 库 的 页 献 才 会 更 加 均 
匀 。 对 于 FutureLearn 的 模式 库 ， 设 计 师 无 法 完成 更 新 模块 拍 述 
的 工作 ， 这 在 一 定 程度 上 降低 了 他 们 的 贡 任 感 。 前 凯 开 发 人 员 
面临 更 大 的 压力 ， 他 们 负责 更 新 文档 ， 这 有 时 会 让 他 们 感觉 是 
个 负担 。 


我 布 望 未 来 的 模式 库 可 以 适应 跨 领 域 的 工作 流程 。 在 那 种 环境 
下 ,不 同 领域 的 人 都 可 以 围绕 设计 模式 进行 讨论 ， 并 一 起 确定 
模式 的 目的 。 


随 着 工具 的 不 断 完善 ， 模 式 库 和 系统 化 的 设计 方法 将 进一步 影 
啊 设 计 师 和 开发 人 员 。 很 多 团队 已 经 看 到 了 这 些 变化 。 曾 经 需 
要 化 费 数 天 时 间 的 手工 操作 ， 现 在 只 要 几 分 钟 就 可 以 完成 一 一 
无 须 更 详细 的 设计 规格 说 明 ， 无 须 一 次 又 一 次 地 构建 同样 的 
模式 。 


也 许 乍 看 之 下 这 会 对 我 们 的 工作 产生 威胁 (我 们 未 来 几 年 还 有 
工作 吗 ? 它 们 会 不 会 影 啊 我 们 在 Web 上 的 创造 力 和 技艺? )。 
但 情况 也 许 正好 相反 。 有 了 设计 体系 ,我们 就 能 腾 出 时 间 和 精 
力 来 解决 更 大 、 更 有 意义 的 问题 ， 例 如 更 好 地 了 解 我 们 的 用 
户 、 让 设计 语言 更 具 包 容 性 ， 等 等 。 
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结语 


在 编程 和 设计 领域 ， 元 里 斯 托 弗 :亚历山大 关于 模式 的 理论 已 
经 成 为 应 用 极 广 的 重要 思想 。 现 在 ， 这 一 理论 正在 影 啊 我 们 对 
设计 体系 的 看 法 。 不 过 ， 同 亚历山大 的 原始 想法 相 比 ， 我 们 可 
能 还 漏 反 了 一 个 很 重要 的 能 力 : 创造 能 够 对 人 类 生活 产生 积极 
影 啊 有 的 体系 的 道德 要 求 。 


亚历山大 在 1996 年 OOPSLA 会 议 ” 上 做 的 主题 演讲 中 强调 ， 
关于 建筑 模式 语言 有 一 个 根本 性 的 问题 : 这 些 模式 进入 体系 之 
百 ， 会 让 人 类 的 生活 更 美好 吗 ? 即使 并 非 所 有 模式 都 能 拥有 这 
种 能 力 ， 我 们 至 少 也 要 不 断 努 力 实现 这 一 目标 。” 


如 今 ， 我 们 生活 中 的 很 多 事情 都 是 在 线 上 完成 的 ， 从 购买 商 
品 、 支 付 账单 ， 到 查找 日 期 、 完 成 学 业 。 模 式 语 言 为 我 们 提供 
了 一 种 思考 设计 的 格式 ， 同 时 也 给 我 们 带 来 了 一 个 挑战 ， 即 我 
们 创建 的 模式 是 否 会 对 人 类 生活 产生 积极 的 影响 ”如 果 是 的 
话 ， 我 们 如 何 知 道 ? 我 们 如 何 持续 地 检验 这 一 点 ? 


当 你 碰 到 诸如 提高 点 击 次 数 、 辟 励 用 户 在 网 站 上 花费 更 长 时 间 
这 样 的 任务 时 ， 你 很 难 仔细 地 芳 谍 上 面 这 些 问 题 。 即 便 蕊 无 妥 
意 ， 我 们 在 网 上 创造 的 很 多 东西 的 切 袁 ， 也 都 征 为 了 获取 短期 
商业 利益 ， 而 不 是 为 了 给 人 们 的 日 常生 活 带 来 真正 的 价值 。” 
于 是 ， 我 们 产生 了 号 在 吸引 用 户 的 模式 、 偏 向 某 些 人 群 的 模 
式 、 鼓 励 人 们 投入 时 间 金 钱 却 很 可 能 致 其 后 悔 的 模式 。 


(1) OOPSLA (Object-Oriented Programming, Systems, Languages & Applications) 
会 议 是 计算 机 协会 ACM) 的 一 个 年 度 性 会 议 。 一 一 译 者 注 

Q) 参见 克里斯托弗 .亚历山大 做 的 主题 为 Patterns in Architecture 的 演讲 。 

G) 参见 Tristan Harris 的 文章 How Technology is Hijacking Your Mind-from a 
Magician and Google Desien Ethicist, 


结语 


实际 上 ， 我 们 很 少 孝 虑 诸如 这 样 的 问题 : 当 有 人 去 世 时 ， 我 们 
所 有 的 数字 账户 和 信息 会 发 生 什么 ?我 们 创造 的 设计 如 何 提 高 
人 们 的 生活 质量 ?我们 的 体系 是否 真 的 具有 包容 性 和 同 理 心 ? 


我 们 构建 的 模式 语言 古 非 党 强大 的 。 它 不 仅 能 影响 数字 世界 ， 
还 能 影 啊 物理 世界 。 无 论 是 为 了 我 们 目 己 ， 还 古 为 了 使 用 我 们 
产品 的 用 户 ， 我 们 都 应 该 不 断 地 思考 并 改进 模式 语言 的 形态 ， 
想 想 我 们 还 能 为 它 做 些 什 么 。 
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扩展 阅读 资料 


如 采 你 想 要 深入 理解 设计 体系 ， 可 以 从 以 下 三 本 书 歼 取 相 关 的 
知识 和 灵感 。 我 也 在 本 书 里 多 次 提 到 了 它们 。 


口 《建筑 的 永恒 之 道 》， 作 者 克里斯托弗 .亚历山大 
口 《 系 统 之 美 》， 作 者 Donella Meadows 
口 How Buildings Learn: What Happens After They’re Built， 作 者 


Stewart Brand 
此 外 ， 还 可 以 阅读 以 下 资料 : 
口 How to Make Sense of Any Mess， 作 者 Abby Covert 
口 Front-end Style Guides， 作 者 Anna Debenham 
口 《 原 子 设计 》)， 作 者 Brad Frost 
口 Responsive Design: Patterns and Principles， 作 者 Ethan Marcotte 
口 《 包 容 性 Web 设计 》， 作 者 Heydon Pickering 


其 他 资料 


“设计 体系 ”Slack 频道 ， 由 Jina Anne 创建 

Nathan Curtis 关于 设计 体系 的 文章 

“样式 指南 ”播客 ， 由 Anna Debenham 和 Brad Frost 主持 
“设计 体系 ”通讯 ， 由 Stuart Robson 策划 

“ 啊 应 式 Web 设计 ”播客 ， 由 Karen McGrane 和 Ethan Marcotte 

主持 

口 网 站 样式 指南 资源 汇总 

感谢 你 的 阅读 。 这 本 书 只 是 关于 设计 体系 这 一 话题 的 一 个 开 
台 。 我 还 会 继续 钻研 设计 体系 。 如 采 你 有 任何 想法 或 故事 想 告 

诉 我 ， 可 以 发 邮件 至 alla@craftui.com， 期 待 你 的 来 信 。” 


DD DU DOD U0 


Q@ 中 文 版 读者 可 发 邮件 至 wang@weakow.com 与 译 者 联系 。 一 一 译 者 注 
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超级 畅销 书 《设计 师 要 懂 心 理学 》 姊妹 篇 
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也 出 版 社 
加, 工 信 出 版 全 团 LE ee 


用 户 体验 设计 : 100 党 入门 课 


令 不 知道 UX 含义 也 能 读 懂 的 体验 设计 基础 书 
人 ”拒绝 抽象 概念 讲解 ， 用 实践 性 课程 手把手 教 你 如 何 成 为 UX 设计 师 
令 其 前 身 UX Crash Course 在 线 阅读 量 百 万 +、 好 评 如 潮 


书号 : 978-7-115-48022-4 
定价 : 59.00 元 


简约 至 上 : 交互 式 设 计 四 策略 《第 2 版 ) 


令 中 文 版 销量 100 000+ 册 交互 式 设计 宝典 全 面 升 级 


合 “删除 ” “组 织 ” 
和 主流 用 户 
令 全 彩印 刷 ， 图 文 并 成 


“隐藏 ” “转移” 四 法 则 ， 赢 得 产品 设计 


书号 : 978-7-115-48556-4 
定价 : 59.00 元 


设计 师 要 懂 心理 学 2 


《设计 师 要 懂 心 理学 》 姊 妹 篇 
令 用 讲 故事 的 手法 生动 呈现 100 个 设计 案例 
令 为 用 户 体验 设计 师 /交互 设计 师 / 产 品 经 理 量 身 打造 


书号 : 978-7-115-42784-7 
定价 : 59.00 元 
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三 庆 其 要 传统 用 户 体验 浪 计 ， 让 你 用 更 低 成 本 ， 更 高 效 认 没 计 出 更 好 体 答 
《精益 创业 》 作 者 
[ 美 ] 埃 里 克 * 莱 斯 丛书 主编 
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[REC 


设计 与 沟通 : 好 设计 师 这 样 让 想法 落地 


令 别 让 你 的 方案 败 在 不 会 说 话 上 ! 
人 破解 13 个 日 常 沟通 反 模 式 ， 有 效 逆 转 沟通 困境 ， 顺 利 传递 设计 创 
意 ， 缩 短 产 品 开发 流程 


书号 : 978-7-115-49718-5 
定价 : 69.00 元 


说 服 陈 设计 七 原则 : 用 设计 影响 用 户 的 选择 


令 3 个 小 时 的 阅读 = 产品 设计 能 力 大 幅 提 升 
令 教会 你 从 用 户 角度 思考 ， 为 影响 和 说 服用 户 而 设计 


书号 : 978-7-115-49682-9 
定价 : 49.00 元 


精益 设计 : 设计 团队 如 何 改善 用 户 体验 《第 2 版 ) 


令 采用 行 之 有 效 的 精益 设计 方法 ， 让 设计 团队 事半功倍 地 设计 出 
更 好 的 用 户 体 验 

令 第 2 版 重 磅 升级 ， 包 括 实 验 的 设计 和 追踪 ， 以 及 许多 Lean UX 
工具 的 调整 


书号 : 978-7-115-47553-4 
定价 : 49.00 元 
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产品 经 理 和 设计 师 需要 懂 技 术 吗 ? 开发 人 员 需 要 懂 设 计 吗 ? 
应 当先 做 设计 再 出 规范 ， 还 是 先 出 规范 再 做 设计 ? 
如 果 老 板 的 意见 与 设计 师 自 己 的 想法 相左 ， 设 计 师 应 该 坚持 己见 吗 ? 


针对 这 类 问题 ， 先 进 的 互联 网 团队 已 经 逐渐 形成 了 一 套 新 的 方法 论 一 一 
设计 体系 (design system ) 。 设 计 体系 是 指 产 品 团队 内 部 形成 的 用 于 
指导 其 设计 工作 的 一 系列 共享 的 最 佳 实践 。 本 书 告诉 你 如 何在 团队 里 建 
立 一 套 通 用 、 共 享 的 语言 ， 从 而 让 团队 成 员 得 以 有 效 地 开展 合作 。 


人 《设计 体系 》 是 给 所 有 设计 师 和 设计 团队 的 宝贵 参考 。 本 书 旨 在 
帮助 你 打造 卓越 的 数字 产品 体验 ， 内 容 丰 富 上 且 引 人 入 胜 。 从 阐释 “设计 
体系 ， 这 一 概念 的 角度 来 看 ， 还 没有 一 本 书 能 如 此 立体 而 生动 。 


一 一 Jon Bell，Netflix 高 级 产品 经 理 

“在 团队 或 组 织 中 建立 一 门 通 用 语言 ， 能 大 大 减少 内 部 成 员 间 的 沟 
通 成 本 。 如 果 你 正 有 此 意 ， 那 么 本 书 中 关于 设计 语言 的 讨论 值得 一 读 。” 
一 一 Bethany Sonefeld，Cloudflare 高 级 产品 设计 师 

“构建 设计 体系 不 仅 涉 及 技术 解决 方案 ， 还 涉及 建立 人 与 人 之 间 的 


联系 。 它 包含 了 难题 的 解决 之 道 ， 并 为 团队 齐心 协力 实现 共同 的 愿景 开 
辟 了 道路 。 这 就 是 本 书 内 容 的 高 明之 处 。 


一 一 Amy Thibodeau，Shopify UX 设计 总 监 


有 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 
有 编辑 或 作 译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨 论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook@turingbook.com。 
在 这 可 以 找到 我 们 : 


微 博 @ 图 灵 教 育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精 彩 人 生 
做 信 图 灵 教 育 : turingbooks 


